reactでDOM要素を取得する方法は何ですか?

Reactでは、DOM要素を取得するためにref属性を使用してDOM要素を参照できます。以下は、DOM要素を取得するいくつかの方法です:

  1. リファレンスを作成する
  2. 参照
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>;
  }
}

上記の例では、createRef()関数を使用してrefオブジェクトを作成し、それをmyRefプロパティに割り当てました。componentDidMount()ライフサイクルメソッドでは、this.myRef.currentを使用して対応するDOM要素にアクセスできます。

  1. 回説を使用してDOM要素を取得する。
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

  componentDidMount() {
    console.log(this.myRef); // 打印DOM元素
  }

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

上記の例では、ref属性にコールバック関数を渡すことで、そのコールバック関数内で対応するDOM要素を取得することができます。

関数コンポーネント内でDOM要素を取得する際には、useRef()を使用してrefオブジェクトを作成し、ref属性を通じてDOM要素を参照することができる点に注意してください。

bannerAds