如何在反應中從父組件調用子組件方法？

Question

父組件中有一系列反應組件。 在父組件上的某些事件上，我想遍歷子組件數組並為每個子組件調用一個方法。 我怎樣才能做到這一點？ 似乎它不像在香草 JS 中那樣工作，你有一個 class 的實例並簡單地調用一個方法。 所以這里是簡化的代碼：

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

在您的情況下，您必須通過數組 map 並使用回調 ref 附加一個 ref 。 使用forwardRef渲染子組件並使用useImperativeHandle掛鈎將 function 暴露給父組件。

工作演示

代碼片段

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

解決此問題的一種方法是編寫useEffect並在該useEffect中調用您的item.value()邏輯。 一旦您的列表已安裝到 DOM，您的 function 將被自動調用。 這可能是調用 function 的正確位置，因為您的列表將在 DOM 內呈現，然后可以處理副作用。

const Item = props => {
  const value = () => 'result!';

  // Handle your side effects here
  useEffect(() => {
    value();
  }, []);

  return (
        <div></div>
  )
}

這個 useEffect 將在組件掛載到 DOM 節點后起作用。 您始終可以將 function 放在基於 class 的組件中的生命周期方法之一或功能組件中的掛鈎中，並根據您的情況從那里調用它們。