react 父组件调用组件中的方法
（原创版3篇）
目录（篇1）
1.引言 
2.父组件调用子组件方法的方法 
  2.1 使用 ateRef() 
  2.2 使用 props 传递方法 
  2.3 使用 React Hooks 
3.实例演示 
4.结论
正文（篇1）
一、引言 
在 React 开发过程中，我们常常需要实现父组件调用子组件的方法，以实现高内聚的效果。本文将介绍三种常用的方法来实现这一功能。
二、父组件调用子组件方法的方法
1.使用 ateRef() 
ateRef() 可以创建一个指向子组件实例的引用。通过引入方法代码，父组件可以调用子组件的方法。具体实现如下：
```javascript 
import React, { createRef } from "react";
class Parent extends React.Component { 
  //...
}
class Child extends React.Component { 
  //...
}
const parentRef = createRef();
class Parent extends React.Component { 
  handleClick = () => { 
    parentRef.current.someMethod(); 
  };
  render() { 
    return ( 
      <div> 
reacthooks理解        <Child ref={parentRef} /> 
        <button onClick={this.handleClick}>调用子组件方法</button> 
      </div> 
    ); 
  } 
}
class Child extends React.Component { 
  someMethod = () => { 
    console.log("子组件方法被调用"); 
  };
  render() { 
    return <div>我是子组件</div>; 
  } 
}
```
2.使用 props 传递方法 
父组件可以将方法作为 props 传递给子组件，子组件通过 this.props 访问该方法。具体实现如下：
```javascript 
import React from "react";
class Parent extends React.Component { 
  handleClick = () => { 
    this.props.someMethod(); 
  };
  render() { 
    return ( 
      <div> 
        <Child someMethod={this.handleClick} /> 
        <button onClick={this.handleClick}>调用子组件方法</button> 
      </div> 
    ); 
  } 
}
class Child extends React.Component { 
  render() { 
    return <div>我是子组件</div>; 
  } 
}
```
3.使用 React Hooks 
React Hooks 是 React 16.8 版本引入的新特性，它可以让我们在不编写 class 组件的情况下使用 state 和其他 React 特性。通过使用 useCallback 和 useContext，我们可以实现父组件调用子组件的方法。具体实现如下：
```javascript 
import React, { useCallback, useContext, useState } from "react";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。