ReactJS - findDOMNode() 方法

---

---

在使用 React 时，我们可能会遇到需要访问组件实际浏览器 DOM 节点的场景。出于多种原因，这非常有用，例如直接操作 DOM 和集成需要访问特定元素的第三方库。我们可以通过使用 react-dom 包提供的 findDOMNode 方法来实现。

什么是 findDOMNode？

findDOMNode 是一个 react-dom 库方法，允许我们定位与 React 类组件对象关联的浏览器 DOM 节点。换句话说，它帮助我们识别 React 组件实际渲染的 HTML 元素。

语法

import { findDOMNode } from 'react-dom';
const dn = findDOMNode(componentInstance);

参数

componentInstance − 它是 React 类组件的实例，domNode 将保存相应的 DOM 元素。

返回值

findDOMNode 函数返回最接近提供的 componentInstance 的第一个浏览器 DOM 节点。但是，有一些因素需要考虑：

• 如果组件渲染为 null 或 false，findDOMNode 将返回 null。

• findDOMNode 返回具有组件渲染为字符串值的文本 DOM 节点。

此外，如果组件提供具有多个子元素的数组或 Fragment，findDOMNode 将返回第一个非空子元素。

示例

示例 - 选择输入应用

当输入文本在组件中挂载时，我们可以使用 findDOMNode 函数自动选择它。以下是我们可以更新应用以包含 findDOMNode 函数的方法：

首先，我们需要创建一个 React 应用，然后创建一个名为 SelectingInput.js 的文件，在这个文件中，我们将有一个组件来使用 findDOMNode 函数在输入字段挂载后自动选择其中的文本。

现在，当我们单击“显示输入”按钮时，App 组件将使用 SelectingInput 组件。SelectingInput 组件内的输入字段将在挂载后自动选择其文本。

SelectingInput.js

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';

class SelectingInput extends Component {
   componentDidMount() {
      const input = findDOMNode(this.inputRef);
      input.select();
   }   
   render() {
      return (
         <div>
            <input
               defaultValue="Hello"
               ref={(input) => (this.inputRef = input)}
            />
         </div>
      );
   }
}

export default SelectingInput;

App.js

import React, { useState } from 'react';
import SelectingInput from './SelectingInput';

function App() {
   const [show, setShow] = useState(false);
   
   return (
      <>
         <button onClick={() => setShow(true)}>Show the input</button>
         <hr />
         {show && <SelectingInput />}
      </>
   );
}

export default App;

输出

此示例演示了如何在 React 应用中使用 findDOMNode 函数在组件挂载时与 DOM 交互。

示例 - 渲染字符串

在这个例子中，我们将创建一个基本的 React 应用程序，它包含两个组件：App 和 MyComponent。它是一个扩展 React 提供的 Component 类的类组件。render 方法返回一个带有文本“This is a simple string.”的 <h1> HTML 元素。App 组件是我们的应用程序的主要组件。在 componentDidMount 生命周期方法中，它使用 findDOMNode 函数获取实际的 DOM 节点。然后将获得的 DOM 节点记录到控制台中。在 App 组件的 render 方法中，MyComponent 的实例在 <div> 内渲染。

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';

class MyComponent extends Component {
   render() {
      return <h1>This is a simple string</h1>; // Rendering to string
   }
}
class App extends Component {
   componentDidMount() {
      const domNode = findDOMNode(this.myComponentInstance);
      console.log(domNode);
   }   
   render() {
      return (
         <div>
            <MyComponent ref={(component) => (this.myComponentInstance = component)} />
         </div>
      );
   }
}

export default App;

输出

运行此应用程序时，它将呈现一个简单的 <h1> 元素，其中包含文本“This is a simple string.”。然后，App 组件的 componentDidMount 生命周期方法将 MyComponent 的关联 DOM 节点记录到控制台中。

示例 - 计数器应用

这是一个使用 findDOMNode 函数的另一个简单的 React 应用。我们将有一个 Counter 组件，它是一个维护计数状态的类组件。它有一个按钮，点击时可以增加计数。componentDidMount 方法将相关的 DOM 节点记录到控制台中。我们的主组件是 App，它在 <div> 内渲染 Counter 组件，并使用 ref 属性获取对 Counter 实例的引用。

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';

class Counter extends Component {
   constructor() {
      super();
      this.state = {
         count: 0,
      };
   }   
   handleIncrement = () => {
      this.setState((prevState) => ({ count: prevState.count + 1 }));
   };   
   componentDidMount() {
      const domNode = findDOMNode(this.counterInstance);
      console.log(domNode);
   }   
   render() {
      return (
         <div>
            <h1>Counter: {this.state.count}</h1>
            <button onClick={this.handleIncrement}>Increment</button>
         </div>
      );
   }
}
class App extends Component {
   render() {
      return (
         <div>
            <Counter ref={(component) => (this.counterInstance = component)} />
         </div>
      );
   }
}

export default App;

输出

因此，当我们点击“递增”按钮时，计数会增加。在控制台中，我们将看到组件挂载时记录的 Counter 组件的关联 DOM 节点。

总结

findDOMNode 是一个用于弥合 React 虚拟 DOM 和实际浏览器 DOM 之间的差距的有用工具。但是我们应该谨慎使用它，并在可能的情况下寻找其他方法，因为直接在我们的 React 应用程序中访问 DOM 会导致意外行为。