實現父子元件雙向資料流整體的思路是：

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;