首先有三个js文件，index.js（父组件） baseForm.js（子组件） etable.js（子组件）

在index.js中定义一个arr数组，传给BaseForm组件

import React from 'react'
import BaseForm from '../components/baseForm'
import ETable from '../components/etable'
export default class IndexPage extends React.Component{state = {arr: [1,2,3,4,5]}changeArr = () => {this.setState({arr: [2,3,4,8,10]})}render () {return (<div><BaseForm arr = {this.state.arr} changeArr = {this.changeArr}></BaseForm><ETable></ETable></div>)}
}
复制代码

在BaseForm组件中能够通过this.props.arr获取到父组件传来的数组，通过this.commitChange向父组件传递一个事件

import React from 'react'
import {Button} from 'antd'
export default class BaseForm extends React.Component{initFormList = () => {const arr = this.props.arr;return arr.map((item) => {return <span>{item}</span>})}commitChange = () => {this.props.changeArr();}render () {return (<div>{this.initFormList()}<Button type="default"  onClick={this.commitChange}>修改</Button></div>)}
}
复制代码

父组件通过接收子组件传来的事件对数据进行处理，在将数据传给子组件，数据都是由父到子单向数据流

由于react中数据传递是单向的，数据流只能从父组件流向子组件。子组件间数据传递可以通过先将数据传给他们共同的父组件，再由父组件传给子组件。（当然也可通过状态管理机制redux控制，本文不详细介绍） 首先通过propData向父组件传递一个对象父组件通过tobrotherdata方法setState一个data值，设置data向另一个子组件ETable传值在ETable组件内部获取数据

import React from 'react'
export default class ETable extends React.Component{state = {data: this.props.data};componentWillReceiveProps(nextProps) {this.setState({data: nextProps.data});}render () {return (<div>{this.state.data.id}</div>)}
}
复制代码