如何在不使用 document.getElementById() 的情况下访问 React 中的 DOM 元素？

如何在 React 中访问 DOM 元素？ React 中的 document.getElementById() 等价物是什么？

React 中访问 DOM 元素与普通 JavaScript 中传统的 document.getElementById() 方法不同。 React 提供了多种选择 DOM 元素的方法。

React Refs

Refs 允许您在 React 组件中创建对 DOM 元素的引用。稍后可以使用此引用来访问 DOM 节点。

回调模式（推荐）

在 React 16.2 及更早版本中，建议使用 refs 的方式是通过回调模式：

<Progressbar completed={25}>

这将创建一个回调函数，该函数接收 DOM 节点作为参数，并将其分配给组件中的 Progress 数组。 state.

字符串引用

字符串引用被视为旧版，不建议使用。但是，它们仍然可以在旧版本的 React 中使用。

<Progressbar completed={25}>

要访问 DOM 元素，请使用：

var object = this.refs.Progress1;

请注意，字符串引用可能会在未来版本中删除React.

React.createRef()

在 React 16.3 及更高版本中，使用React.createRef() 创建引用。

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

要访问 DOM 元素，请使用：

const node = this.myRef.current;

React Hook: useRef

在函数组件中 ( React 16.8 中引入），使用 useRef 钩子创建一个ref.

const childRef = useRef(null);
return <div ref={childRef} />;

要访问 DOM 元素，请使用：

const node = childRef.current;

通过使用这些方法，您可以访问和操作 React 组件中的 DOM 元素，从而可以更精细地控制Web 应用程序的交互和功能。

以上是如何在不使用 document.getElementById() 的情况下访问 React 中的 DOM 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！