React Props以及和State的區別
阿新 • • 發佈：2021-02-16
技術標籤：JS
state 和 props 主要的區別：
在於props是不可變的，而 state 可以根據與使用者互動來改變。
元件需要定義 state 來更新和修改資料，子元件只能通過 props 來傳遞資料。
1.如何在元件中使用 props：
<body> <div id="wrapper"></div> <script type="text/babel"> function Hello(props) { return <h1>你好 {props.name}!</h1>; } const element = <Hello name="是我"/>; ReactDOM.render( element, document.getElementById('wrapper') ); </script> </body>
2.預設 Props:
<body> <div id="wrapper"></div> <script type="text/babel"> class Hello extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Hello.defaultProps = { name: '是我' }; const element = <Hello/>; const wrapper=document.getElementById('wrapper'); ReactDOM.render( element, wrapper ); </script> </body>
3.State 和 Props：
我們可以在父元件中設定 state， 並通過在子元件上使用 props 將其傳遞到子元件上。在 render 函式中, 我們設定 name 和 site 來獲取父元件傳遞過來的資料。
<body> <div id="wrapper"></div> <script type="text/babel"> class WebSite extends React.Component {//父元件 constructor() { super(); this.state = { name: "曾小超", site: "https://zeng.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component {//元件1 render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component {//元件2 render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <WebSite />, document.getElementById('wrapper') ); </script> </body>
