React获取组件对应的DOM元素多种实现方法

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); // 创建一个 ref
  }

  componentDidMount() {
    // 访问 DOM 元素
    console.log(this.myRef.current); // 输出对应的 DOM 元素
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>; // 将 ref 赋给 DOM 元素
  }
}

export default MyComponent;

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null); // 创建一个 ref

  useEffect(() => {
    console.log(myRef.current); // 输出对应的 DOM 元素
  }, []);

  return <div ref={myRef}>Hello, World!</div>; // 将 ref 赋给 DOM 元素
};

export default MyComponent;

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = null; // 初始化 ref
  }

  setRef = (element) => {
    this.myRef = element; // 将 DOM 元素赋值给 myRef
  };

  componentDidMount() {
    console.log(this.myRef); // 输出对应的 DOM 元素
  }

  render() {
    return <div ref={this.setRef}>Hello, World!</div>; // 使用回调 ref
  }
}

export default MyComponent;

import React, { useEffect } from 'react';

const MyComponent = () => {
  let myRef = null; // 初始化 ref

  const setRef = (element) => {
    myRef = element; // 将 DOM 元素赋值给 myRef
  };

  useEffect(() => {
    console.log(myRef); // 输出对应的 DOM 元素
  }, []);

  return <div ref={setRef}>Hello, World!</div>; // 使用回调 ref
};

export default MyComponent;

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.itemsRef = []; // 初始化一个空数组
  }

  addRef = (element) => {
    if (element && !this.itemsRef.includes(element)) {
      this.itemsRef.push(element); // 将 DOM 元素添加到数组中
    }
  };

  componentDidMount() {
    console.log(this.itemsRef); // 输出所有对应的 DOM 元素
  }

  render() {
    return (
      <div>
        {['Item 1', 'Item 2', 'Item 3'].map((item, index) => (
          <div key={index} ref={this.addRef}>
            {item}
          </div>
        ))}
      </div>
    );
  }
}

export default MyComponent;

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const itemsRef = useRef(new Map()); // 创建一个 Map

  const setRef = (element, index) => {
    if (element) {
      itemsRef.current.set(index, element); // 将 DOM 元素存入 Map
    }
  };

  useEffect(() => {
    console.log(itemsRef.current); // 输出所有对应的 DOM 元素
  }, []);

  return (
    <div>
      {['Item 1', 'Item 2', 'Item 3'].map((item, index) => (
        <div key={index} ref={(el) => setRef(el, index)}>
          {item}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

import React, { useRef } from 'react';

const InputComponent = () => {
  const inputRef = useRef(null); // 创建一个 ref

  const focusInput = () => {
    inputRef.current.focus(); // 使输入框获得焦点
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="输入一些文本..." />
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
};

export default InputComponent;