Question

父组件中有一组反应组件。对于父组件上的某个事件，我想遍历子组件数组并为每个子组件调用一个方法。我该如何实现？好像它在香草JS中不起作用，在香草JS中，您有该类的实例并仅调用方法。因此，这是简化的代码：

const Item = props => {
  const value = () => 'result!';
  return (
        <div></div>
  )
}
 
const App = props => {
  const items = props.items.map(item => <Item key={uuid()} item={item} />)
  const run = e => {
    items.map(item => console.log(item.value()))
  }
  return (
    <button onClick={run} type="button">Run!</button>
  ) 
}

const items = [
  'Lorem ipsum dolor sit amet',
  'consectetur adipiscing elit'
];

ReactDOM.render(<App items={items} />, document.querySelector("#app"))

我用以下代码创建了一个jsfiddle-https://jsfiddle.net/jkLq26pg/37/ 在第11个字符串上，方法value（）被调用，并引发错误。但是记录item.props可以工作，并为每个项目输出道具。为什么不调用方法？请给我一些建议，以使其运作。

Answer 1

在您的情况下，您必须通过数组进行映射，并使用callback ref附加引用。使用forwardRef渲染子组件，并使用useImperativeHandle钩子将函数展示给父组件。

Working demo

代码段

const Item = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    value: () => "result!"
  }));

  return <div ref={ref} />;
});

const itemsz = ["Lorem ipsum dolor sit amet", "consectetur adipiscing elit"];
const App = props => {
  const ref = useRef({});

  const items = itemsz.map((item, index) => {
    return (
      <Item
        ref={r => (ref.current[index] = r)}
        key={index}
        item={item}
      />
    );
  });
  const run = e => {
    items.map((item, index) => console.log(ref.current[index].value()));
  };
  return (
    <>
      <h3>click run and see console log</h3>
      <button onClick={run} type="button">
        Run!
      </button>
      {items}
    </>
  );
};

注意-尝试避免这种模式。

Answer 2

解决此问题的一种方法是编写employeesFetchedResultsController并在useEffect内调用您的item.value()逻辑。一旦您的列表挂载到DOM，您的函数将被自动调用。这可能是调用函数的正确位置，因为您的列表将在DOM中呈现，并且可以处理副作用。

useEffect

在组件安装到DOM节点后，此useEffect将起作用。您始终可以将函数放在基于类的组件或功能组件中的挂钩中的生命周期方法之一中，然后根据情况从那里调用它们。

如何在响应中从父组件调用子组件方法？

2 个答案: