Question

我需要从父组件调用子组件方法在reactjs。我尝试过使用ref但不能这样做。任何人都可以建议任何解决方案谢谢。

Answer 1

您可以为子组件指定一个引用，然后像

那样调用父类的函数

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 (
           {/*...*/}
      )
   }
}

Answer 2

您可以将registerCallback道具传递给您的孩子，并从componentDidMount调用它，并将引用传递给您的孩子component方法，然后您可以随时调用该方法

Answer 3

不要：）

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

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

Answer 4

在您的父母中您可以创建参考

在构造函数中：

 this.child = React.createRef();

任何功能：

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

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

以及在Message（child）组件中

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

  };

Answer 5

如果使用React挂钩，则可以使用useRef和useImperativeHandle挂钩。

在子组件中，将函数添加到挂钩中。

使用引用从父对象调用公开函数。

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

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

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

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

5 个答案: