React---获取真实的DOM

在开发的过程中,某些情况我们需要获取真实的DOM,react提供了ref来让我们获取真实的DOM,然后去操作这些DOM

import React, { Fragment } from "react";
import ReactDom from "react-dom";
import "../style/springDropdownComponent.css";
class SpringDropdownComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dropdownList: [
        {
          text: "第一个菜单",
          value: "01",
        },
        {
          text: "第二个菜单",
          value: "02",
        },
        {
          text: "第三个菜单",
          value: "03",
        },
        {
          text: "第四个菜单",
          value: "04",
        },
        {
          text: "第五个菜单",
          value: "05",
        },
      ],
    };
  }
  componentWillMount() {
    // 这里会报错
    //  console.log(this.refs.menu.getElementsByTagName("a"));
  }

  componentDidMount() {
    // 它之后的生命周期函数都是可以的
    console.log(this.refs.menu.getElementsByTagName("a"));
  }
  componentWillUpdate() {
    console.log(this.refs.menu.getElementsByTagName("a"));
  }
  componentDidUpdate() {
    console.log(this.refs.menu.getElementsByTagName("a"));
  }
  componentWillUnmount() {
    console.log(this.refs.menu.getElementsByTagName("a"));
  }

  render() {
    return (
      <Fragment>
        <div className="menu" ref="menu">
          {this.state.dropdownList.map((x) => {
            return <a> {x.text}</a>;
          })}
        </div>
      </Fragment>
    );
  }
}
export default SpringDropdownComponent;

注意

需要注意的时候,要在元素在页面上挂载完成之后才可以获取DOM,也就是说需要在生命周期函数componentDidMount及其之后执行的函数才可以!