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

在 React 中，与使用普通 JavaScript 不同，直接访问 DOM 元素是不同的。 React 使用虚拟 DOM 来有效地更新真实 DOM，这使得它与普通 JavaScript 不同。

如何访问 DOM 元素

选项 1：使用 Refs

• 将 Ref 与函数组件一起使用：(v16.8.0) 使用 useRef 和转发参考。使用useRef 定义ref，然后使用forwardRef 将其转发到DOM 元素。要访问该元素，请使用 ref 的 current 属性 (ref.current)。

选项 2：使用 React.createRef (v16.3 )

• 使用 React.createRef() 创建一个 ref 并将其附加到一个元素以便稍后访问它。使用 ref.current 获取 DOM 节点。

选项 3：使用回调模式（旧版）

• 在 JSX 中定义 ref 属性元素并传递一个接收 DOM 元素引用的回调函数。

选项 4：使用字符串引用（旧版）

• 通过将 ref 属性设置为标识 DOM 元素的字符串来使用字符串引用。使用 this.refs.[stringRef].

示例

下面是使用回调模式选择 DOM 元素的示例：

  render() {
    return (
      

        
要访问元素，可以使用 this.progressBars[0]、this.progressBars[1] 和 this.progressBars[2] 对它们执行操作。