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

在React 中從其父元件呼叫子元件方法

在React 應用程式中，通常需要從子元件中呼叫子元件中定義的方法父元件。雖然有多種方法可以實現此目的，但本文重點介紹一種利用引用的流行方法。

透過引用進行命令性方法暴露

引用允許開發人員存取渲染的元件的元素並與它們互動。以前，refs 僅受基於類別的元件支持，但隨著 React Hooks 的引入，它們現在也可以在函數式元件中使用。

在函數元件中使用forwardRef

要使函數元件可以透過 refs 訪問，需要將其包裝在forwardRef 中。這使我們可以存取 ref 對象，該對象可以透過 ref 屬性進行分配，並作為第二個參數傳遞給函數組件。

使用 UseImperativeHandle 公開方法

要在子元件上公開方法，我們使用 useImperativeHandle 掛鉤。這個鉤子有兩個參數：一個 ref 物件和一個回調函數。回調函數傳回一個將擴展組件實例的物件。透過在傳回的物件中提供方法，我們可以透過引用來存取它。

程式碼片段範例

讓我們示範如何從父級呼叫子方法使用 refs 和 useImperativeHandle鉤子的組件：

Child組件

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

  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1 id="Hi">Hi</h1>;
});

父組件

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

  return (
    <div>
      <child ref="{childRef}"></child>
      <button onclick="{()"> childRef.current.getAlert()}>Click</button>
    </div>
  );
};

父組件

在這個例子中，子元件透過ref暴露了getAlert方法，可以從透過存取父元件的目前屬性ref.

注意：重要的是要記住，通常不鼓勵在子元件上公開命令式方法，而傾向於採用更數據驅動和聲明性的方法。但是，在某些需要直接存取子元件功能的場景中，此方法可能很有用。

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