父級向子級傳參

父子元件通訊主要用到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;

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