創(chuàng)建組件
- 函數(shù)式創(chuàng)建函數(shù)組件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- ES6語法創(chuàng)建類組件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
將組件渲染至頁面
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
React約定，組件名稱使用大寫開頭，如<Welcome /> 表示組件 <div/>則表示HTML標簽
組件中使用組件
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')
);
props不可改變
function Welcome(props){
props.name = 'JAVA';
return <h1>Hello {props.name}</h1>
}
const element = <Welcome name="react"/>
ReactDOM.render(element, document.getElementById('root'));
以上代碼試圖改變props的值，但編譯的時候報錯了
image.png
props傳值
- 通過引號傳值（傳遞的值只能作為字符串）
function Welcome(props){
return <h1>Hello {1 + props.num}</h1>
}
const element = <Welcome num="1"/>
ReactDOM.render(element, document.getElementById('root'));
image.png
- 通過{}方式傳值，將保留值原來的類型
function Welcome(props){
return <h1>Hello {1 + props.num}</h1>
}
const element = <Welcome num={1}/>
ReactDOM.render(element, document.getElementById('root'));
image.png
