快捷導(dǎo)航

react 父子組件之間通訊props

更新時(shí)間：2018年09月08日 14:14:40 作者：Cheny0815

這篇文章主要介紹了react 父子組件之間通訊props，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

父組件

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

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

（ps:此例子中也包含組件之間的嵌套,同時(shí)組件的名稱開頭字母必須大寫，不然會(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 (
   <div className="content">
    <div className="content_main">
      <Table list={list}/> //組件之間的通訊
    </div>
    <Footer /> //組件嵌套
   </div>
  );
 }
}

export default pagedemo;

子組件（table.js）

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

import React from 'react';

function table(props) {
 console.log(props);
 return (
  <div className="table_main">
   <table>
     <tbody>
       <tr className="first_tr">
        <td>內(nèi)容</td>
        <td>發(fā)起人</td>
        <td>類型</td>
        <td>時(shí)間</td>
        <td>操作</td>
       </tr>
       {
        props.list.map(function(name){ //接受父組件傳遞過來的值并進(jìn)行處理
         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;

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: