组件是 React 的核心,是 View 的重要组成部分;React 中的组件分为两种:一种是函数组件(使用函数来创建组件),另一种是类组件(通过类创建的组件)。
通过函数来定义组件
通过函数定义的组件被称为无状态组件,没有自己的私有数据;在定义时函数名称的首字母必须要大写,React 在解析时会按照组件的形式去解析
函数值必须要有返回值,返回值为 jsx 语法;使用时将函数名作为标签使用,可以是单标签 <tag/>
也可以是双标签 <tag></tag>
组件传参
组件传参是在使用组件时通过自定义属性的方式传递,通过定义组件 函数的形参 props
(虽然名字可以随便起,但一般都用 props)来接收,该参数是一个对象,遵循单项数据流(和 vue 中的一样,父传子,子可以接收但是不能修改也不能添加)
示例:
import React from 'react'
import ReactDOM from 'react-dom'
function Child (props) {
// 不能修改
// props.name = 'www'
return (
<div>
{
/* 使用传递过来的数据 */}
<p>{
props.name}</p>
<p>{
props.age}</p>
</div>
)
}
// 渲染
ReactDOM.render(<Child name="大熊" age={
20} />, document.