[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') ); ```