React父子组件传值

父组件给子组件传值

父组件 WorkTeam

class WorkTeam extends Component {

  workTeamDS: DataSet;

  constructor(props) {
    super(props);
    this.workTeamDS = new DataSet({
      ...WorkTeamDS(),
    });
  }
 
  @Bind()
  goToAssignStaff(record) {
    Modal.open({
      title: intl.get('hfins.ssc.workTeams.assignStaff'),
      style: {
        width: 1020,
      },
      drawer: true,
      closable: true,
      //将父组件的值传给子组件
      children: (<WorkTeamAssignStaff workTeamRecord={record} />),
      footer: null
    });
  }
  render() {
    return (
      <Content>
        <Table
          dataSet={this.workTeamDS}
          columns={this.columns}
          buttons={this.buttons}
          pagination={getConfig('pagination')}
        />
      </Content>
    );
  }
}

export default formatterCollections({ code: ['hfins.ssc.workTeams', 'hfins.common'] })(WorkTeam);

子组件(通过this.props.Xxx接收父组件传过来的值)

interface WorkTeamAssignStaffProps {
  workTeamRecord: Record;
}

export default class WorkTeamAssignStaff extends Component<WorkTeamAssignStaffProps> {

  workTeamAssignStaffDS: DataSet;

  constructor(props) {
    super(props);
    this.workTeamAssignStaffDS = new DataSet({
      ...WorkTeamAssignStaffDS(),
      events: {
        create: ({ record }) => {
          const workTeamId = this.props.workTeamRecord.get('workTeamId');
          record.set('workTeamId', workTeamId);
        },
      },
    });
  }

  render() {
    return (
      <Card bordered={false} className={DETAIL_CARD_CLASSNAME}
      //  子组件获取父组件传过来的值
            title={`${this.props.workTeamRecord.get('workTeamCode')}/${this.props.workTeamRecord.get('description')}`}>
        <Table
          dataSet={this.workTeamAssignStaffDS}
          buttons={this.buttons}
          columns={this.columns}
          pagination={getConfig('pagination')}
        />
      </Card>
    );
  }
}

子组件给父组件传值

父组件通过changePer()事件接收子组件传过来的值

import React from 'react'
import Child from './Pages/home'
export default class App extends React.Component {
    constructor() {
        super()
        this.state = {
            value: '这是父组件传递给子组件的数据'
        }
    }
    // 接收子组件传递的参数，data中存放的就是传递的数据
    getSon(data) {
        this.setState({
            value: data
        })
    }
    render() {
        return <Child value={this.state.value} tranPer={ this.getSon.bind(this) }></Child>
    }
}

子组件

子组件向父组件传递的数据的时候，子组件使用this.props.event绑定一个事件名，父组件通过这个event的事件名接收到数据

import React from 'react'
export default class Child extends React.Component {
    constructor() {
        super()
        this.state = {
            text: 'React'
        }
    }
    // 向父组件传递数据
    changePer() {
        this.props.tranPer('我是子组件向父组件传递的数据')
    }
    render() {
        return (
            <div>
                <h3>Hello {this.state.text}</h3>
                {/* 子组件接收父组件的参数 */}
                <h4>{this.props.value}</h4>
                <button onClick={this.changePer.bind(this)}>修改父组件传递的数据</button>
            </div>
        )
    }
}

兄弟组件传值(需要父组件中转)

兄弟A=>父组件 =>兄弟B