React 中父子组件的传值

明确思想

（1）首先得明确一个问题，作为子组件一般我们不会再给他绑定model，因为我们遵守React的一个思想，就是一个Container，其余都是用作展示组件的component。而所谓的展示组件，就是他只接受数据和函数，而不进行相关的处理。那么我们会遇到以下问题

问题

① 父组件如何给子组件传值和函数

②子组件如何返回数据给父组件

③如果我需要通过父组件来控制子组件的某些功能，怎么才能使用子组件的函数

涉及内容

①父组件传值和函数给子组件

②父组件控制子组件函数

举例说明

在做一个list页面展示，我的一个新增数据的功能，这个地方使用的Modal弹框处理，而Modal是作为一个单独组件，我就会思考，本页面用于显示Modal和上传数据使用，而Modal则用于自身的表单的校验，那么我怎么在点击组件确定时，返回给父组件数据，并且隐藏Modal呢。下面是我正在做的一个项目截图，我要在Modal里面输入身份证号，然后经过查询，将名字反馈到姓名，然后点击确定跳转页面。

父传子代码如下

这个是我要传给子组件的一些函数和数据，我写在了state

 parentprops :{
                title:'新增其他人员',
                isVisible:false,
                list:{},
                name:'',
                handleCancel:()=>
                {
                    this.props.dispatch({
                        type:'otherpeople/changeVisibal',
                        payload:{isVisible:false},

                    })
                },
                onRef :(ref) => {
                    this.ModalForm = ref
                },
                seachIdCard:(idCard)=>
                {
                    this.props.dispatch({
                        type:'otherpeople/getBase',
                        payload:{
                            idCard,
                        },
                    });
                    
                },

这个是向子组件传递数据和函数

 <ModalForm parentprops={this.state.parentprops} />

在子组件中通过

this.props.parentprops.handleCancel();

来使用父组件的函数，数据也类似。

父传子代码如下

在父组件我们要给子组件传递一个函数，用ref来绑定子组件

onRef :(ref) => {
                    this.ModalForm = ref
                },

然后在子组建的componentDidMount里面绑定this

 componentDidMount(){
      
      this.props.parentprops.onRef(this)
    }

然后就在父组件里调用子组件的函数

用法如下：

this.ModalForm.check()