React

在 React 中，forwardRef 是一種高級技術，它允許你將 ref 從父組件傳遞到子組件，從而直接訪問子組件的 DOM 節點或公開的方法。這對于需要操作子組件內部狀態或 DOM 的場景非常有用。為了使子組件能夠暴露其屬性和方法給父組件，通常會結合 useImperativeHandle Hook 使用 forwardRef。

如何使用 forwardRef 和 useImperativeHandle

1. 創建一個帶有 forwardRef 的子組件:

   • 使用 React.forwardRef 來創建一個接受 ref 參數的組件。

2. 使用 useImperativeHandle 定義要暴露的方法和屬性:

   • 在子組件中使用 useImperativeHandle 來定義哪些方法或屬性應該通過 ref 暴露出去。

3. 在父組件中使用 ref 來訪問子組件的公開接口:

   • 創建一個 ref 并將其傳遞給子組件，然后通過這個 ref 訪問子組件暴露的方法或屬性。

示例代碼

子組件 (ChildComponent.js)

import React, { useRef, useImperativeHandle, forwardRef } from 'react';const ChildComponent = forwardRef((props, ref) => {const inputRef = useRef(null);// 定義要暴露的方法useImperativeHandle(ref, () => ({focusInput: () => {inputRef.current.focus();console.log('子組件的輸入框獲得了焦點');},getInputValue: () => inputRef.current.value,}));return (<div><input ref={inputRef} type="text" placeholder="這是子組件的輸入框" /></div>);
});export default ChildComponent;

父組件 (ParentComponent.js)

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {const childComponentRef = useRef(null);const handleFocus = () => {if (childComponentRef.current) {childComponentRef.current.focusInput();}};const handleGetValue = () => {if (childComponentRef.current) {const value = childComponentRef.current.getInputValue();console.log('子組件的輸入值:', value);}};return (<div><ChildComponent ref={childComponentRef} /><button onClick={handleFocus}>讓子組件的輸入框獲得焦點</button><button onClick={handleGetValue}>獲取子組件的輸入值</button></div>);
};export default ParentComponent;

解釋

• 子組件 (ChildComponent.js):

  • 使用 forwardRef 創建了一個接受 ref 參數的組件。
  • 使用 useImperativeHandle 定義了 focusInput 和 getInputValue 方法，并將它們綁定到傳入的 ref 上。這意味著父組件可以通過 ref 訪問這些方法。

• 父組件 (ParentComponent.js):

  • 創建了一個 ref (childComponentRef) 并將其傳遞給 ChildComponent。
  • 提供了兩個按鈕，分別用于調用子組件的 focusInput 和 getInputValue 方法。

這種方法確保了父組件可以安全地與子組件進行交互，同時保持良好的封裝性。通過 useImperativeHandle，你可以精確控制哪些方法或屬性是公開的，而不會意外地暴露不必要的實現細節。

Vue

當你通過 ref 獲取到子組件的根 DOM 元素后，你可以使用標準的 DOM API 來訪問或操作該元素及其子元素。如果你想要訪問 <p> 標簽，可以通過多種方式實現，具體取決于你想要進行的操作。

訪問子元素的方法

1. 使用 querySelector 或 querySelectorAll:

   • 這些方法允許你根據選擇器（如標簽名、類名、ID 等）來查找特定的子元素。

2. 遍歷子節點:

   • 你可以使用 children、childNodes 或其他類似屬性來遍歷子節點。

3. 直接訪問特定子元素:

   • 如果你知道子元素的具體位置，可以直接通過 firstElementChild、lastElementChild 等屬性訪問。

示例代碼

假設你想在父組件中訪問并打印子組件中的 <p> 標簽的內容，可以按照以下方式修改你的代碼：

子組件 (ChildComponent.vue)

<template><div ref="root"><p id="content">這是子組件的內容</p></div>
</template><script setup>
import { defineExpose, ref } from 'vue';const root = ref(null);// 使用 defineExpose 顯式暴露給父組件的方法或屬性
defineExpose({getRootEl: () => root.value,
});
</script>

父組件 (ParentComponent.vue)

<template><ChildComponent ref="childComponent" /><button @click="handleClick">點擊我</button>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const childComponent = ref(null);const handleClick = () => {if (childComponent.value) {// 調用子組件的公開方法來獲取 DOM 引用const el = childComponent.value.getRootEl();// 使用 querySelector 查找 <p> 標簽const pElement = el.querySelector('p#content');console.log('子組件的 <p> 內容:', pElement?.textContent);}
};
</script>

解釋

• 子組件 (ChildComponent.vue):

  • 我們為 <p> 標簽添加了一個 id="content"，以便更容易地通過 querySelector 查找它。

• 父組件 (ParentComponent.vue):

  • 在 handleClick 方法中，我們首先調用 getRootEl 獲取子組件的根元素。
  • 然后，使用 querySelector 方法通過 ID 選擇器查找 <p> 標簽，并打印其文本內容。這里使用了可選鏈操作符 (?.) 來安全處理可能為 null 的情況。

這種方法確保了你能夠以一種安全且可控的方式訪問子組件內部的特定 DOM 元素。請記住，盡量減少對 DOM 的直接操作，除非確實有必要。保持盡可能多的邏輯在 Vue 的響應式系統內，這樣可以使應用更加高效和易于維護。