react 组件（react组件）

科技前沿 • 2025-04-29 15:14 • 阅读 42

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div>

特别注意这里的写法，如果要在 JSX 里写 js 表达式(只能是表达式，不能是流程控制语句)，就需要加 {}，包括注释也是一样，并且可以多层嵌套

ES6 的加入让 JavaScript 直接支持使用 class 来定义一个类，react 的第二种创建组件的方式就是使用的类的继承，ES6 class 是目前官方推荐的使用方式，它使用了 ES6 标准语法来构建

组件名称必须以大写字母开头。

<Welcome name="james">

小驼峰命名来定义属性

<Welcome className="blue" tabIndex="1" >

函数组件通过参数 props 接收外部组件传入的数据, 在组件内根据 props 处理 UI

传递值：

<Header id="1001" url="http://xxx.com"></Header>

函数式组件用参数 props 接收值

类组件中处理props

类组件通过this.props接收外部组件传入的数据，在组件内根据this.props处理UI

class 组件内部用 this.props 接收值

子组件：

父组件中

注意：

原名是可以省略，充当的是一个包裹元素(包裹其他标签), 最终在页面中不会渲染.

在react组件中，使用sass编写组件样式，需要依赖sass插件。

使用步骤：

下载插件

npm i sass -D

创建.scss文件，编写sass代码

在组件中引入scss文件

import 'https://www.jb51.net/article/App.scss';

主文件

子文件

特别说明：HTML中表单元素是可输入的，也就是有自己的可变状态，但是默认表单元素的值不受所在组件state的控制，也就是表单元素所在组件无法实时获取最新的表单元素值

表单元素值不受所在组件状态的控制，我们将这样的表单元素称为：非受控组件

受控组件：值受到React组件状态控制的表单元素

一般是通过defaultValue属性，onChange事件配合将非受控组件变为受控组件

到此这篇关于React组件的使用详细讲解的文章就介绍到这了,更多相关React组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！