實現父子組件雙向數據流整體的思路是：

1，父組件可以向子組件傳遞props，props中帶有初始化子組件的數據，還有回調函數

2，子組件的state發生變化時，在子組件的事件處理函數中，手動觸發父函數傳遞進來的回調函數，同時時將子組件的數據傳遞回去（有時間研究）

父組件

父組件中定義一個函數，包含一個props的參數，函數內利用super（props）傳遞給子組件，this.state中用于定義本頁面中要用到的以及要傳遞給子組件的變量。

父組件的render函數中利用<Table list={this.state.list}/>此種形式傳遞給子組件

（ps:此例子中也包含組件之間的嵌套,同時組件的名稱開頭字母必須大寫，不然會報錯）

import React from 'react';import Footer from './footer.js'import Table from './table.js'class pagedemo extends React.Component { constructor(props) {  super(props);  this.state = {   list: [{    'id':'1',    'title':'123',    'time':'2017',    'person':'cheny0815',    'type':'type',    'operation':'operation'   },{    'id':'2',    'title':'456',    'time':'2017',    'person':'cheny0815',    'type':'type',    'operation':'operation'   },{    'id':'3',    'title':'789',    'time':'2017',    'person':'cheny0815',    'type':'type',    'operation':'operation'   }]  } } render() {  let list = this.state.list;  return (   <div className="content">    <div className="content_main">      <Table list={list}/> //組件之間的通訊    </div>    <Footer /> //組件嵌套   </div>  ); }}export default pagedemo;

子組件（table.js）

子組件調用父組個傳遞過來的參數，并進行傳值

import React from 'react';function table(props) { console.log(props); return (  <div className="table_main">   <table>     <tbody>       <tr className="first_tr">        <td>內容</td>        <td>發起人</td>        <td>類型</td>        <td>時間</td>        <td>操作</td>       </tr>       {        props.list.map(function(name){ //接受父組件傳遞過來的值并進行處理         return (           <tr key={name.id}>            <td>{name.title}</td>            <td>{name.person}</td>            <td>{name.type}</td>            <td>{name.time}</td>            <td>{name.operation}</td>           </tr>         )        })       }     </tbody>   </table>  </div> )}export default table;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。