React 中如何從父元件呼叫子元件方法？

從父元件呼叫子方法

在React中，元件之間的通訊通常是透過props（屬性）和事件來實現的，但是它可以使用引用從父元件存取和呼叫子元件方法。

方法呼叫使用Refs

1. 將子元件包裝在forwardRef：要存取子元件實例，請將其包裝在forwardRef中。這允許 React 將 ref 作為第二個參數傳遞給元件。
2. 初始化子實例 Ref： 在父元件中，使用 useRef() 建立一個 ref。這將儲存對子組件實例的引用。
3. 將引用指派給子元件：使用 ref 屬性將參考傳遞給子元件。這會將子元件實例指派給父元件的參考。
4. 公開子方法： 在子元件中，使用 useImperativeHandle 傳回一個包含要向父元件公開的方法的物件。

範例Hooks

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

  return <h1>Hi</h1>;
});

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById('root'));

在此範例中， getAlert() 是Child 元件公開的方法，可以透過存取childRef 的目前屬性從Parent元件呼叫該方法。請注意，不建議直接從父級呼叫子方法，並且應該避免，以支援正確的元件通訊模式。

以上是React 中如何從父元件呼叫子元件方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！