本篇文章給大家分享的是有關(guān)react 中怎么使用props實(shí)現(xiàn)父子組件通訊，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)平遙免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

實(shí)現(xiàn)父子組件雙向數(shù)據(jù)流整體的思路是：

1，父組件可以向子組件傳遞props，props中帶有初始化子組件的數(shù)據(jù)，還有回調(diào)函數(shù)

2，子組件的state發(fā)生變化時(shí)，在子組件的事件處理函數(shù)中，手動(dòng)觸發(fā)父函數(shù)傳遞進(jìn)來(lái)的回調(diào)函數(shù)，同時(shí)時(shí)將子組件的數(shù)據(jù)傳遞回去（有時(shí)間研究）

父組件

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

父組件的render函數(shù)中利用

此種形式傳遞給子組件

（ps:此例子中也包含組件之間的嵌套,同時(shí)組件的名稱(chēng)開(kāi)頭字母必須大寫(xiě)，不然會(huì)報(bào)錯(cuò)）

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 (
   
    
       //組件之間的通訊
    
     //組件嵌套
   
  );
 }
}

export default pagedemo;

子組件（table.js）

子組件調(diào)用父組個(gè)傳遞過(guò)來(lái)的參數(shù)，并進(jìn)行傳值

import React from 'react';

function table(props) {
 console.log(props);
 return (
  
   

                                                                          {         props.list.map(function(name){ //接受父組件傳遞過(guò)來(lái)的值并進(jìn)行處理          return (                                                                                                   )         })        }          

內(nèi)容	發(fā)起人	類(lèi)型	時(shí)間	操作
{name.title}	{name.person}	{name.type}	{name.time}	{name.operation}