如何使用 useImperativeHandler 从 Parent 调用 Child

Question

我有一个父组件，我需要调用其子组件的 2 个方法。我可以使用 useImperativeHandler 来调用一个像

const Parent = () => {

  const childRef = useRef();

  return (

    <div>

      <Child ref={childRef} />

      <Button onClick={() => childRef.current.methodOne()}>

        Submit

      </Button>

    </div>

  );

};

然后在子组件中

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

  useImperativeHandle(

    ref,

    () => ({

      methodOne() {

        // some code

      },

    }),

    []

  );

  return;

});

到目前为止，效果非常好。但我希望父组件中的另一个按钮可以调用同一个子组件中的第二个方法（我们称之为 methodTwo）。我该怎么做？

Answer 1

检查这个例子，我试图让它变得简单易懂，但如果你遇到麻烦，我什至很乐意帮助你进行缩放通话这是react中的基本概念，将方法从父级传递给子级在此示例中，我将 console.log 函数从父级传递给子级这两个按钮调用不同的方法，就像你想做的那样。希望这是有道理的！

Answer 2

找到答案。userImperativeHandle 采用多个这样的方法，您可以在父组件中正常调用它们。&nbsp; useImperativeHandle(ref, () => ({&nbsp; &nbsp; methodOne: () => {&nbsp; &nbsp; },&nbsp; &nbsp; methodTwo: () => {&nbsp; &nbsp; }&nbsp; }));