reactで要素のスタイルを取得する方法は？

2年 ago
桜, 春樹
1 minute

Reactでは、refを使用して要素の参照を取得し、その参照を使用して要素のスタイルにアクセスできます。

最初に、コンポーネントのコンストラクター内でrefオブジェクトを作成します。

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

その後、要素のスタイルを取得する必要がある場合は、refオブジェクトを使用してその要素にアクセスできます。

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

componentDidMount() {
  const element = this.myRef.current;
  const style = window.getComputedStyle(element);
  console.log(style);
}

上記の例では、refはdiv要素に割り当てられ、componentDidMountライフサイクルメソッドでdiv要素のスタイルを取得しています。要素の計算されたスタイルオブジェクトを取得するには、window.getComputedStyleメソッドを使用できます。このオブジェクトには、要素のすべてのスタイル属性が含まれています。

注意：結果の値を正しく取得するには、コンポーネントのレンダリングが完了してから、refを使用して要素のスタイルにアクセスする必要があります。

bannerAds