本篇文章給大家分享的是有關react 中怎么使用props實現父子組件通訊，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

專注于為中小企業提供網站制作、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業平遙免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了成百上千家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

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

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;

以上就是react 中怎么使用props實現父子組件通訊，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創新互聯行業資訊頻道。

分享標題：react中怎么使用props實現父子組件通訊-創新互聯
鏈接分享：http://vcdvsql.cn/article0/dihhio.html

成都網站建設公司_創新互聯，為您提供網站維護、外貿建站、定制網站、品牌網站建設、做網站、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯