react中父子组件数据传递，子组件之间的数据传递

首先有三个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>
        )
    }
}