[TOC] > 组件可以接受任意 props，包括基本数据类型，React 元素以及函数。 ## 函数组件 ``` function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ``` ## class 组件 ``` class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ``` ## props 用法 > 注意： 组件名称必须以大写字母开头。 ``` function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; ReactDOM.render( element, document.getElementById('root') ); ``` ## 组合组件 > 多个组件用 括号 ``` function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); ```