react父子組件之間傳值簡述（近期學習心得）

PascalXie 發布于2019-08-22 18:39 / 356人閱讀

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

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

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

父組件代碼：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父組件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 這里可以發ajax請求  去后端請求數據   通過setState將值保存到自己的state中
      // 假定data為后端請求回來的數據
      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}
                  
                
            
        )
    }
}

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

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

子組件傳值給父組件：
總體思路就是父組件與子組件統一管理父組件中的state，父組件將state傳遞給子組件，子組件通過onChange將數據回傳給父組件的state

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

子組件代碼：
class Children extends React.Component {
    // 子組件狀態改變就會觸發父組件傳遞過來的onUpdata方法，可以進行一系列的傳值，比如將輸入值傳遞回去等
    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}
                  
                
            
        )
    }
}

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

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

以上是最近學習所得，如有錯誤煩請指正，不勝感激！

云服務器 GPU云服務器父子組件父子組件通信父子組件通訊父子組件-動態渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96048.html

es6語法的reactjs的state狀態和組件間props傳遞的實踐

摘要：目前只是體會到組件之間傳遞的值的初始來源一般都是值，可能是實踐不夠的原因。。。此時，可以建一個組件內部封裝一個構造函數，內部封裝三個方法。 PS：開頭的一段廢話 ???????想起一個月前還不知道reactjs該如何下手的而今天有點小體會，還是有點小欣慰，不過回望一些走過的坑和開始時的滿頭漿糊覺得還是有點恐怖的。今天分享一點實踐中的小心得給新手朋友們。 reactjs的es6語法形式 ...

malakashi 2019-08-20 17:19 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

li21 2019-08-23 17:11 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

AaronYuan 2019-07-31 10:21 評論0 收藏0
React父子組件間的傳值

摘要：父組件默認值默認值哈哈哈哈傳值給子組件接受子組件的傳值為子組件啦啦啦啦接受父組件傳的值為傳值給父組件父組件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...

寵來也 2019-08-23 13:08 評論0 收藏0