当前位置：首页 > React

react如何过去id

2026-02-11 18:56:20React

获取元素ID的方法

在React中获取DOM元素的ID可以通过多种方式实现，具体取决于使用场景和组件类型。

使用ref获取元素

react如何过去id

import { useRef } from 'react';

function Component() {
  const elementRef = useRef(null);

  const handleClick = () => {
    console.log(elementRef.current.id);
  };

  return (
    <div id="myElement" ref={elementRef} onClick={handleClick}>
      Click me
    </div>
  );
}

通过事件对象获取

function Component() {
  const handleClick = (event) => {
    console.log(event.target.id);
  };

  return (
    <button id="myButton" onClick={handleClick}>
      Click
    </button>
  );
}

类组件中使用createRef

react如何过去id

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current.id);
  }

  render() {
    return <div id="myDiv" ref={this.myRef}>Content</div>;
  }
}

通过props传递ID

function ChildComponent({ id }) {
  return <div>My ID is: {id}</div>;
}

function ParentComponent() {
  return <ChildComponent id="child123" />;
}

使用document.getElementById

function Component() {
  React.useEffect(() => {
    const element = document.getElementById('targetElement');
    console.log(element.id);
  }, []);

  return <div id="targetElement">Element</div>;
}

选择方法时应考虑组件类型和具体需求，ref方法在大多数现代React应用中更为推荐。