摘要：前言中的數(shù)據(jù)流動有很好的解決方案，但是對于初學(xué)者來說學(xué)習(xí)曲線比較陡，并且在小型項目不太適用，開發(fā)維護(hù)成本都比較高，所以這里我只說多帶帶用的情況下組件之間傳值的用法，自學(xué)的，有不足煩請大神指正。以上是最近學(xué)習(xí)所得，如有錯誤煩請指正，不勝感激

前言：react中的數(shù)據(jù)流動有很好的解決方案：redux，但是redux對于初學(xué)者來說學(xué)習(xí)曲線比較陡，并且在小型項目不太適用，開發(fā)維護(hù)成本都比較高，所以這里我只說多帶帶用react的情況下組件之間傳值的用法，自學(xué)的，有不足煩請大神指正。

父組件傳遞給子組件：
核心思路就是將父組件中的state傳遞給子組件

父組件代碼：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父組件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 這里可以發(fā)ajax請求  去后端請求數(shù)據(jù)   通過setState將值保存到自己的state中
      // 假定data為后端請求回來的數(shù)據(jù)
      var data = [];
      this.setState({
          menu: data
      })
  }
  render() {
      return (
          {this.state.menu.map(function (data) {
            return 
          })}
      )
  }
}
export default Father;
子組件代碼：
class Children extends React.Component {
    render(){
        // 這里的data就是父組件傳遞過來的值
        var data = this.props.data;
        return(
            
                
                  
                    // 這里就可以通過將data中的值渲染到子組件中
                    
                    {data.value}
                  
                
            
        )
    }
}

以上就是父組件傳值給子組件

現(xiàn)在的項目開發(fā)過程中，大多數(shù)的子組件是需要有一些數(shù)據(jù)上的操作的，比如input中的輸入、checkbox的選中與取消選中等，這樣的情況下就需要將子組件的數(shù)據(jù)回傳給父組件，應(yīng)用redux的話，可以通過store統(tǒng)一管理分發(fā)數(shù)據(jù)，多帶帶用react也是可以實現(xiàn)的

子組件傳值給父組件：
總體思路就是父組件與子組件統(tǒng)一管理父組件中的state，父組件將state傳遞給子組件，子組件通過onChange將數(shù)據(jù)回傳給父組件的state

父組件代碼：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父組件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 這里可以發(fā)ajax請求  去后端請求數(shù)據(jù)   通過setState將值保存到自己的state中
      // 假定data為后端請求回來的數(shù)據(jù)
      var data = [];
      this.setState({
          menu: data
      })
  }
  // 子組件觸發(fā)   參數(shù)就是子組件回傳回來的一些數(shù)據(jù)
  ChildrenFunc(data,value,key){
    // 拿到當(dāng)前組件的state
    let menu = this.state.menu;
    // 遍歷當(dāng)前state，遍歷過程中可以對state中的值進(jìn)行修改
    for(let i = 0; i < menu.length; i++){
      if(key == menu[i].key){
        menu[i].value = data;
      }
    };
    // 將修改之后的值保存到當(dāng)前組件的state中
    this.setState({
      menu: menu
    });
  }
  render() {
      return (
          {this.state.menu.map(function (data) {
            // onUpdata方法就是子組件狀態(tài)改變時就會調(diào)用這個函數(shù)，通過這個函數(shù)子組件就會觸發(fā)父組件的ChildrenFunc方法，從而達(dá)到修改state的功能
            return  {$this.ChildrenFunc(data,value,position)}}/>
          })}
      )
  }
}
export default Father;

子組件代碼：
class Children extends React.Component {
    // 子組件狀態(tài)改變就會觸發(fā)父組件傳遞過來的onUpdata方法，可以進(jìn)行一系列的傳值，比如將輸入值傳遞回去等
    ChildrenChange(event,value,position){
        this.props.onUpdata(event.target.value,value,position);
    }
    render(){
        // 這里的data就是父組件傳遞過來的值
        var data = this.props.data;
        return(
            
                
                  
                    // 這里就可以通過將data中的值渲染到子組件中
                     {this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/>
                    {data.value}
                  
                
            
        )
    }
}

以上就是子組件傳值給父組件的實現(xiàn)方式，父組件中更進(jìn)一步操作（例如提交數(shù)據(jù)）就可以通過自身state中的值來進(jìn)行提交
例如：

父組件中提交數(shù)據(jù)：
addData(){
    // 獲取state
    let menu = this.state.menu;
    // 遍歷state   將我們要的數(shù)據(jù)取出來
    var newArray = [];
    for(let i = 0; i < menu.length; i++){
      if(menu[i].key == "某些我們需要的值"){
        newArray.push(menu[i].value);
      }
    };
    // 提交時的參數(shù)
    var data = {
        id: "xxxx",
        menu: newArray.join(",")
    }
    // 提交的ajax請求代碼。。。。。
}

以上是最近學(xué)習(xí)所得，如有錯誤煩請指正，不勝感激！