ReactでDOM要素を取得する方法は何ですか？

2年 ago
桜, 春樹
1 minute

ReactでDOM要素を取得する一般的な方法は、ref（参照）を使用することです。refを使うと、コンポーネント内でDOMノードへの参照を作成し、DOMノードにアクセスが必要な場合に使用することができます。

ReactでDOM要素を取得する手順は次のとおりです：

  1. Ref インスタンスを作成する
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello World</div>;
  }
}
  1. この.myRef.current
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问DOM节点
  }

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

注意：関数コンポーネント内では、useRefフックを使用してrefを作成し、その使用方法は上記のクラスコンポーネントと同じです。

refを使用してDOM要素を取得する代わりに、Reactのイベント処理機構を活用してDOM要素の属性や値を取得することもできます。たとえば、イベント処理関数内でevent.targetを使用してクリックされたDOM要素を取得できます。

function handleClick(event) {
  console.log(event.target); // 获取点击的DOM元素
}

function MyComponent() {
  return <button onClick={handleClick}>Click Me</button>;
}
bannerAds