# 组件定义 ## 函数定义 定义一个React组件可以使用一个函数，具体如下 ```jsx function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ReactDOM.render( <Welcome name='xiaoyu'/>, document.getElementById('root') ); ``` 可以在浏览器中看到输出 "Hello, xiaoyu"。 在这个例子中，使用 `function` 定义了一个名叫 `Welcome` 的组件，使用 `ReactDOM.render` 渲染组件的时候可以将 `Welcome` 作为一个标签的形式使用，这个组件接受一个属性值的参数，渲染了传入的`name`属性。 ## 类定义 定义一个React组件还可以使用ES6的class定义，具体如下 ```jsx class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render( <Welcome name='xiaoyu'/>, document.getElementById('root') ); ``` 最终渲染效果与之前用 function 定义的组件相同。 这里，使用类定义了一个组件，必须继承 `React.Component` 类以确保此类是一个React组件，重写父类中的 `render()` 方法进行页面渲染。 ### 将函数转换为类 可以通过5个步骤将函数组件转换为类组件 1. 创建一个名称扩展为 React.Component 的ES6 类 2. 创建一个叫做render()的空方法 3. 将函数体移动到 render() 方法中 4. 在 render() 方法中，使用 this.props 替换 props 5. 删除剩余的空函数声明 ## React元素可以是用户自定义的组件 比如改写上面使用类定义的组件: ```jsx class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } let name = 'xiaoyu' const element = <Welcome name={name} /> ReactDOM.render( element, document.getElementById('root') ); ``` >[warning] 再次强调: 组件名称必须以大写字母开头。 ## 组合组件 组件可以相互组合、嵌套: ```jsx function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="xiaoyu" /> <Welcome name="xiaoqiao" /> <Welcome name="xiaoming" /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); ``` >[warning] 组件的返回值只能有一个根元素。这也是为什么要用一个\<div>来包裹所有\<Welcome />元素的原因。 ## 点表示法 可以使用 JSX 中的点表示法来引用 React 组件，这样可以方便地从一个模块中导出许多 React 组件。 例如，有一个名为 MyComponents.DataPicker 的组件，可以直接在 JSX 中使用它: ```jsx import React from 'react'; const MyComponents = { DatePicker: function DatePicker(props) { return <div>Imagine a {props.color} datepicker here.</div>; } } function BlueDatePicker() { return <MyComponents.DatePicker color="blue" />; } ```