在工厂组件渲染的组件中调用函数

Question

我有以下问题：

我有一个 React 功能组件 A（父组件）
在父组件A中，名为的工厂组件使用普通JSON对象创建了不同的组件，例如组件B、C、D。

我想达到的目标：

组件 B、C 和 D 都应自行实现具有特定代码的 handlerFunction。所以handlerFunction不是父组件提供的，是组件B,C,D自己实现的。

我想调用每个组件 B、C 和 D 的特定 handlerFunction。

这怎么可能？

Answer 1

是的，功能组件不能单独分配一个 React ref，但您可以转发该 ref 或将 a ref 作为命名 prop 传递。

在 class-based 组件示例中，您有类似

的内容

class ComponentA extends Component {
  handlerFunction = () => {
    console.log("A handler function");
  };

  render() {
    return ...;
  }
}

并调用 handlerFunction，附加引用并在您的代码中调用 ref.current.handlerFunction()

const someFunction = () => {
  ...
  refA.current.handlerFunction();
  ...
}

...

<ComponentA ref={refA} />

对于功能组件，您可以转发引用并使用 useImperativeHandle 挂钩将引用“连接”到内部处理函数

const ComponentB = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    handlerFunction
  }));

  const handlerFunction = () => {
    console.log("B handler function");
  };

  return ...;
});

并调用 handlerFunction，同样，调用 ref.current.handlerFunction()

const someFunction = () => {
  ...
  refB.current.handlerFunction();
  ...
}

...

<ComponentB ref={refB} />

在工厂组件渲染的组件中调用函数

Call function in components that are rendered by a factory component

factory

function

reactjs