在 React 中通过 ID 获取元素

作者

在 React 中通过 ID 获取元素

Get an element by ID in React

在 React 中通过 ID 获取元素：

  1. ref在元素上设置道具。
  2. 使用该current属性访问useEffect挂钩中的元素。
应用程序.js
import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef(null);

  useEffect(() => {
    // 👇️ use document.getElementById()
    const el = document.getElementById('my-element');
    console.log(el);

    // 👇️ (better) use a ref
    const el2 = ref.current;
    console.log(el2);
  }, []);

  return (
    <div>
      <h2 ref={ref} id="my-element">
        Some content here
      </h2>
    </div>
  );
}

通过id获取元素

该代码片段展示了如何使用
document.getElementById()
方法并通过ref.

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的h2元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

应用程序.js
useEffect(() => {
  // 👇️ use document.getElementById()
  const el = document.getElementById('my-element');
  console.log(el);

  // 👇️ (better) use a ref
  const el2 = ref.current;
  console.log(el2);
}, []);

我们使用useEffect钩子是因为我们想确保ref已在元素上设置并且该元素已呈现给 DOM。

或者，document.getElementById如果您无权访问该元素并且无法在其上设置ref道具，则可以使用该方法。

应用程序.js
useEffect(() => {
  // 👇️ use document.getElementById()
  const el = document.getElementById('my-element');
  console.log(el);
}, []);

您必须在挂钩中或事件发生时调用该document.getElementById()方法。useEffect

这是一个在事件发生时通过 ID 获取元素的示例。

应用程序.js
import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ use document.getElementById()
    const el = document.getElementById('my-element');
    console.log(el);

    // 👇️ (better) use a ref
    const el2 = ref.current;
    console.log(el2);
  };

  return (
    <div>
      <h2 ref={ref} id="my-element">
        Some content here
      </h2>

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

单击时通过 id 获取元素

在事件处理函数中也可以通过 ID 或使用 ref 选择元素。

如果您尝试通过 ID 或ref直接在功能组件的方法中获取元素，您尝试访问的元素可能尚未呈现。 render

该useEffect钩子在组件中的 DOM 元素被渲染到 DOM 后运行，因此如果id存在具有 provided 的元素，它将被选中。

–

发表评论