初識React(8)：父子元件傳參

hope93發表於2018-09-06
React元件

父級向子級傳參

父子元件通訊主要用到props，如下：

在父元件中：

import React from `react`
import ChildCom from `./childCom.js`

class ParentCom extends React.Component {
   render() {
     return (
       <div>
         <h1>父元件</h1>
         <ChildCom content={`我是父級過來的內容`}/>
       </div>
     )
   }
}

export default ParentCom;

在子元件中：

import React from `react`

class ChildCom extends React.Component {
   render() {
     return (
       <div>
         <h2>子元件</h2>
         <div>
           {this.props.content}
         </div>
       </div>
     )
   }
}

export default ChildCom;

通過上面例子可以看出，在父元件中，我們引入子元件，通過給子元件新增屬性，來起到傳參的作用，子元件可以通過props獲取父元件傳過來的引數

子級向父級傳參

在父元件中：

import React from `react`
import ChildCom from `./childCom.js`

class ParentCom extends React.Component {
  state = {
    getChildValue: ``
  }
  getChildValue(value) {
    this.setState({
      getChildValue: value
    })
  }

   render() {
     return (
       <div>
         <h1>父元件</h1>
         <div>子元件過來的值為：{this.state.getChildValue}</div>
         <ChildCom onValue={this.getChildValue.bind(this)}/>
       </div>
     )
   }
}

export default ParentCom;

在子元件中：

import React from `react`

class ChildCom extends React.Component {
  valueToParent(value) {
    this.props.onValue(value);
  }
   render() {
     return (
       <div>
         <h2>子元件</h2>
         <div>
            <a onClick={this.valueToParent.bind(this,123)}>向父元件傳值123</a>
         </div>
       </div>
     )
   }
}

export default ChildCom;

子元件向父元件傳參，其實就是在父元件中給子元件新增一個屬性，這個屬性的內容為一個函式，然後在子元件中呼叫這個函式，即可達到傳遞引數的效果

相關文章