React父子传递参数的三种方式

一、父组件传子组件

父传子比较简单，直接在父组件定义传值名称和值，子组件通过props来接收即可

父组件：

constructor(props){
    super(props)
    this.state={
      message:"I am from parent"
    }
  }
  render(){
    return(
          <Child txt={this.state.message}/>
    )
  }
}

子组件：

render(){
    return(
          <p>{this.props.txt}</p>
    )
  }

二、重点讲解父组件如何接收子组件数据

1、通过传递一个函数来接收

import React from "react";
import ReactDOM from "react-dom";

// 父组件
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.Foo = this.Foo.bind(this);
    this.state = {
      name: "lzq"
    };
  }
  Foo(data) {
    this.setState({
      name: data
    });
  }
  render() {
    return (
      <div>
        <div>{this.state.name}</div>
        <Son data={this.Foo}/>
      </div>
    );
  }
}

// 子组件
class Son extends React.Component {
  handleClick = () => {
    this.props.data("改变父组件的值");
  };
  render() {
    return <button onClick={this.handleClick}>change parent</button>;
  }
}
ReactDOM.render(<Parent />, document.getElementById("root"));

2、如果子组件是表单，可以使用表单域

父组件：

export default class Category extends Component {
	updateCategory = () => {
		// 对子表单进行验证
	    this.child.validateFields()
	    .then(async values => {
			// vaules是子表单的数据
			
	      // 重置子组件表单数据
	      this.child.resetFields()
	    
	    .catch(errorInfo => {
	      message.error('分类不能为空！')
	    });
	
	    
	}
	render() {
		return (
			<Button onClick={this.updateCategory }>更新分类</Button>
			<UpdateForm  onRef={(ref) => { this.child = ref }}/>
		)
	}
}

子组件：

export default class UpdateForm extends Component {
  /**
   * 1、创建表单域
   */
  formRef = React.createRef()

  componentDidMount() {
    // 2、传值给父组件
　　this.props.onRef(this.formRef.current)
　 }

  render() {
    return (
      <Form 
        ref={this.formRef}  // 3、定义表单ref
      >
        <Form.Item
          name="name"
          rules={[  
            {
              required: true,
              message: '分类名称必须输入'
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    )
  }
}

3、通过ref访问

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  getChildDate = () => {
  	const node = this.myRef.current
  }
  render() {
    return (
    	<Button onClick={this.getChildDate}>获取子组件数据</Button>	
    	<Child ref={this.myRef} />
    )
  }
}