Access HTML节点不是由React生成的

// 类组件中的ref
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello World</div>;
  }
}

// 函数组件中的ref
function MyComponent() {
  const myRef = React.useRef();

  return <div ref={myRef}>Hello World</div>;
}

// 类组件中的访问和操作
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const node = this.myRef.current;
    // 执行操作，例如修改样式、添加事件监听器等
    node.style.color = 'red';
    node.addEventListener('click', () => {
      console.log('Clicked');
    });
  }

  render() {
    return <div ref={this.myRef}>Hello World</div>;
  }
}

// 函数组件中的访问和操作
function MyComponent() {
  const myRef = React.useRef();

  React.useEffect(() => {
    const node = myRef.current;
    // 执行操作，例如修改样式、添加事件监听器等
    node.style.color = 'red';
    node.addEventListener('click', () => {
      console.log('Clicked');
    });

    return () => {
      // 在组件卸载时清理操作
      node.removeEventListener('click', () => {
        console.log('Clicked');
      });
    };
  }, []);

  return <div ref={myRef}>Hello World</div>;
}