React父组件调用子组件属性和方法

Posted 2023-04-04 风意不止

子组件暴露自身的属性和方法
父组件使用ref绑定对应的子组件。调用即可

类组件绑定ref示例

import React from \'react\'
import Child from \'./Child\'

export default class Parent extends React.Component 
  // ...
  render() 
    return (
      <div>
        <Child ref=ref => this.refChild = ref />
        /* ... */
      </div>
    )
  

函数组件绑定ref示例

import React,  useRef  from \'react\'
import Child from \'./Child\'

export default function Parent(props) 
  const refChild = useRef(null)
  // ...
  return (
    <div>
      <Child ref=refChild />
      /* ... */
    </div>
  )

子组件为类组件

当子类为类组件时，比较简单，无需特殊处理。

子类的实例可以直接调用类属性和方法。

这是ES6固有的语法

// 子组件为类组件时 - 示例代码

import React from \'react\'

export default class Child extends React.Component 
  constructor(props) 
    super(props)
    this.state = 
      count: 1,
      name: \'wmm66\'
    
  
  addCount = (step) => 
    this.setState((state, props) => 
      return  count: state.count + step 
    )
  
  render() 
    const  count, name  = this.state
    return (
      <div>
        <div>count -- name</div>
        <button onClick=this.addCount.bind(this, 2)>加2</button>
      </div>
    )
  

// 父组件调用子组件示例

console.log(\'child count: \', this.refChild.state.count)
this.refChild.addCount(3)

子组件为函数组件

当子类为函数组件时，需要使用React.forwardRef包裹。

并用React.useImperativeHandle将需要访问的属性和方法暴露出去

// 子组件为函数组件时 - 示例代码

import React,  useState, useImperativeHandle, forwardRef  from \'react\'

const Child = forwardRef(function _Child(props, ref) 
  // 将外部需要访问的属性和方法暴露出去
  useImperativeHandle(ref, () => (
    count,
    addCount,
  ))

  const [count, setCount] = useState(1)
  const [name, setName] = useState(\'wmm66\')

  const addCount = (step) => 
    setCount(count + step)
  

  return (
    <div>
      <div>count -- name</div>
      <button onClick=() => addCount(2)>加2</button>
    </div>
  )
)

export default Child

父组件调用子组件示例

console.log(\'child count: \', refChild.current.count)
refChild.current.addCount(step)

React子组件和父组件通信

React子组件和父组件通信包括以下几个方面：

1. 子组件获取父组件属性：props或者state
2. 子组件调用父组件的方法
3. 父组件获取子组件的属性：props或者state
4. 父组件调用子组件的方法

我们从下面这个例子来详细了解：

 1 var Father=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"父组件"
 5         }
 6     },
 7     MakeMoney:function(){ // 挣钱，供子组件调用
 8         alert("我在挣钱!");
 9     },
10     CheckStudy:function(){ // 学习，调用子组件方法
11         this.refs["child"].Study();
12     },
13     getChildName:function(){ // 调用子组件方法获取孩子名字
14         alert(this.refs["child"].getName());
15     },
16     render:function(){
17         
18         return <div>
19                     <button onClick={this.CheckStudy}>监控孩子学习</button>
20                     <button onClick={this.getChildName}>获取孩子名字</button>
21                     <br/>
22                     子组件
23                     <Child ref="child" fatherName={this.props.name} MakeMoney={this.MakeMoney}></Child>
24                 </div>;
25     }
26 });

父组件

 1 var Child=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"子组件"
 5         }
 6     },
 7     StudyMakeMoney:function(){ // 学习挣钱，调用父组件方法
 8         this.props.MakeMoney();
 9     },
10     Study:function(){ // 学习，调用子组件方法
11         alert("我在学习！");
12     },
13     getName:function(){// 供父组件调用，返回名字
14         return this.props.name;
15     },
16     render:function(){
17         
18         return <div>父组件名字：{this.props.fatherName}<button onClick={this.StudyMakeMoney}>孩子学习挣钱</button></div>;
19     }
20 });

子组件

对应的

1. 子组件Child通过父组件传入的name，获取父组件的props
2. 子组件Child通过父组件传入的MakeMoney方法调用父组件方法
3. 父组件Father，通过ref调用子组件的getName方法，获取props
4. 父组件Father,通过ref调用子组件的Study方法