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