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 方法返回一个 <h1> HTML 元素，其中包含文本"这是一个简单的字符串"。App Component 是我们应用的主要组件。在 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>; // 渲染为字符串
   }
}
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> 元素，其中包含文本"这是一个简单的字符串"。App 组件的 componentDidMount 生命周期方法随后会将 MyComponent 的关联 DOM 节点记录到控制台。

示例 − Counter App

这是另一个使用 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 可能会导致意外行为。

reactjs_reference_api.html