父子组件数据传递

Posted 2020-12-26 wyangnb

子传父

1.首先父组件设定一个自定义函数

getChildDatas = (values) => {
    //...业务代码
}

2.将该函数暴露在子组件的引用上

<Child
   getChildDatas = {this.getChildDatas } 
/>

3.在子组件内使用

this.props.getChildDatas (values);

父传子

1.直接将要传递的数据暴露在子组件的引用上

state = {
    visible: false,
}
<Child
   getChildDatas = {this.getChildDatas } 
   visible={this.state.visible}
/>

2.在子组件内使用

render() {
    const { visible } = this.props;    //this.props 就是从父组件传递过来的数据，在此将其解构取出visible 这个要用的属性
    return (
        <Modal
            visible={visible}
        />
    );
}