从reactjs中的父组件调用子组件方法

Posted 2023-02-21

【中文标题】从reactjs中的父组件调用子组件方法

【英文标题】：Call child component method from parent component in reactjs

【发布时间】：2017-11-24 02:48:35

【问题描述】：

我需要从父组件调用子组件方法 在 reactjs 中。我曾尝试使用 refs 但无法做到。任何人都可以提出任何解决方案。 谢谢。

【问题讨论】：

Call child method from parent的可能重复

虽然我已经很晚了，但我也在学习 React，所以我很好奇父母需要调用子方法的情况。你愿意解释一下吗？

【参考方案1】：

不要:)

将函数提升到父级并将数据作为道具向下传递。您可以向下传递相同的函数，以防孩子也需要调用它。

https://facebook.github.io/react/docs/lifting-state-up.html

【参考方案2】：

你可以给子组件分配一个引用，然后像父组件一样调用函数形式

class Parent extends React.Component 
   callChildFunction = () => 
       this.child.handleActionParent();  ///calling a child function here
   
   render()
      return (
           <div>
           /* other things */
           <Child ref=(cd) => this.child = cd/>
           </div>
      )
    


class Child extends React.Component 
   handleActionParent = () => 
       console.log('called from parent')
   
   render() 
      return (
           /*...*/
      )
   

【参考方案3】：

如果使用 React Hooks，你可以使用 useRef 和 useImperativeHandle hooks。

在子组件中，添加钩子中的函数。

const Child = forwardRef((props, ref) => 

  const printSomething = () =>
     console.log('printing from child function')
  
  useImperativeHandle(ref, () => (
    printSomething: printSomething
  ));

  return <h1>Child Component</h1>;
);

使用 ref 从父级调用公开的函数。

const Parent = () => 
  const childRef = useRef();

  return (
    <div>
      <Child ref=childRef />
      <button onClick=() => childRef.current.printSomething()>Click</button>
    </div>
  );
;

【参考方案4】：

您可以将registerCallback props 传递给您的孩子并从componentDidMount 调用它并将引用传递给您的孩子组件方法，然后您可以随时调用它的方法

【参考方案5】：

你可以在你的父母中创建一个参考

在构造函数中：

 this.child = React.createRef();

在任何函数中：

execute=(comment)=>
        this.child.current.addComment();
    

render()
        return (
            <div>
                <Messages ref=this.child comment=this.state.comment/>
            </div>
        )
    

在消息（子）组件中

addComment=()=>
    console.log("Pi ", this.props);

  ;