Làm thế nào để truy cập vào nút DOM trong một React component

ReactDOM cung cấp cho bạn phương thức ReactDOM.findDOMNode(param) để tìm đối tượng Node tương ứng với tham số của phương thức.

Bên trong Class Component nếu bạn gọi phương thức ReactDOM.findDOMNode(this), nó sẽ trả về cho bạn nút gốc (Root Node) của mô hình DOM. Ví dụ:

js Copy

// File: findDOMNode-example.jsx

class Fruits extends React.Component {
  doFind() {
    // Find root Node of this Component
    var node = ReactDOM.findDOMNode(this);
    node.style.border = "1px solid red";
  }
  render() {
    return (
      <ul>
        <li>Apple</li>
        <li>Apricot</li>
        <li>Banana</li>
        <li>
          <button onClick={() => this.doFind()}>Find Root Node</button>
        </li>
      </ul>
    );
  }
}

// Render
ReactDOM.render(<Fruits />, document.getElementById("fruits1"));

html Copy

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>ReactJS findDOMNode()</title>
    <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <style>
      #fruits1 {
        border: 1px solid blue;
        padding: 5px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Example: findDOMNode(this)</h3>
    <a href="">Reset</a>

    <div id="fruits1"></div>

    <script src="findDOMNode-example.jsx" type="text/babel"></script>
  </body>
</html>

Kết quả:

Làm thế nào để truy cập vào nút `DOM` trong một React component?

Câu trả lời Làm thế nào để truy cập vào nút `DOM` trong một React component?

Bình luận

Làm thế nào để truy cập vào nút DOM trong một React component?

Câu trả lời Làm thế nào để truy cập vào nút `DOM` trong một React component?

Bình luận

Làm thế nào để truy cập vào nút `DOM` trong một React component?