特别注意这里的写法，如果要在 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事件配合将非受控组件变为受控组件
- 文本框、富文本框、下拉框操作value属性
- 复选框操作checked属性
- 给表单元素添加name属性，名称与state相同
- 根据表单元素类型获取对应值
- 在change事件处理程序中通过[name]来修改对应的state
到此这篇关于React组件的使用详细讲解的文章就介绍到这了,更多相关React组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/51908.html