react組件間的信息交流數據傳遞圖文講解

yvonne 發布于2019-08-30 15:54 / 3373人閱讀

摘要：子組件請輸入郵箱父組件，此處通過獲取子組件的值用戶郵箱兄弟組件傳遞信息我們可以通過給這兩兄弟一個共同的父親，然后結合上面的兩種方法將老大的信息傳給父親子傳父，再通過父親傳給老二信息實現交流父傳子這里只寫出了父組件代碼實現到的數據傳遞

React 組件之間交流的方式，可以分為以下 3 種：
a【父組件】向【子組件】傳值；
b【子組件】向【父組件】傳值；
c 沒有任何嵌套關系的組件之間傳值（PS：比如：兄弟組件之間傳值）

1.父組件向子組件傳遞信息

這個比較容易和直觀

// 父組件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: true
    };
  },
  render: function() {
    return (
      
    );
  }
});

// 子組件
var ToggleButton = React.createClass({
  render: function () {
    // 從【父組件】獲取的值
    var checked = this.props.checked,
        text = this.props.text;

    return (
        {text}: 
    );
  }
});

2子組件向父組件傳遞信息

子組件需要控制自己的 state，然后告訴父組件自己的state，通過props調用父組件中用來控制state的函數，在父組件中展示子組件的state變化。

//子組件
var Child = React.createClass({
    render: function(){
        return (
            
                請輸入郵箱：
            
        )
    }
});
//父組件，此處通過event.target.value獲取子組件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ""
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            
                用戶郵箱：{this.state.email}
                
            
        )
    }
});
React.render(
  ,
  document.getElementById("test")
);

3.兄弟組件傳遞信息

我們可以通過給這兩兄弟一個共同的父親，然后結合上面的兩種方法
將老大的信息傳給父親（子傳父），再通過父親傳給老二信息實現交流（父傳子）

這里只寫出了父組件代碼實現input到list的數據傳遞

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            arry: []
        }
    }
    getDate(obj) {
        this.state.arry.push(obj)
        this.setState({
            arry: this.state.arry
        })
        console.log(this.state.arry)
    }
    render() {
        return (
            
                
                
            
        )
    }
}

云服務器 GPU云服務器信息交流變更備案信息圖文引導主動發送微信圖文信息信息傳遞

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

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

react-navigation使用詳解

摘要：導航組件使用詳解注意了，如果有小伙伴們發現運行作者提供的示例項目報如下的錯誤，可能是大家使用了命令導致的，解決這個錯誤的辦法就是將刪除，然后重新使用命令來安裝，最后使用來起服務，應該就不報錯了。 react-navigation導航組件使用詳解注意了，如果有小伙伴們發現運行作者提供的react-navigation示例項目報如下的錯誤，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 評論0 收藏0
React 組件之間如何交流

摘要：前言今天群里面有很多都在問關于組件之間是如何通信的問題，之前自己寫的時候也遇到過這類問題。英文能力有限，如果有不對的地方請跟我留言，一定修改原著序處理組件之間的交流方式，主要取決于組件之間的關系，然而這些關系的約定人就是你。前言今天群里面有很多都在問關于 React 組件之間是如何通信的問題，之前自己寫的時候也遇到過這類問題。下面是我看到的一篇不錯英文版的翻譯，看過我博客的人都知道...

tomlingtm 2019-08-19 17:06 評論0 收藏0
React 新特性講解及實例(一)

摘要：接收一個屬性，這個組件會讓后代組件統一提供這個變量值。因此對于同一個對象而言，一定是后代元素。解決方法就是把內聯函數提取出來，如下講了這么多，我們還沒有講到其實我們已經講完了的工作原理了。本節主要講解以下幾個新的特性： Context ContextType lazy Suspense 錯誤邊界（Error boundaries） memo 想閱讀更多優質文章請猛戳GitHub博...

Betta 2019-08-23 18:04 評論0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，將介紹開發應用時，經常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準確，請讀者主要關注模式的內容。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。本篇是React深入系列的最后一篇，將介紹開發React應用時，經常用到的模式，這些模式并非都有...

Chao 2019-08-22 17:28 評論0 收藏0