Reactを使用しているときに要素の幅を見つける？

Question

Reactコンポーネントのライフサイクルのどの時点で、CSSファイルに設定されているコンポーネントのCSSプロパティを取得できますか？

私はそれをレンダリングメソッドとcomponentDidMountメソッドで試してみましたが、コンポーネントにCSSプロパティを割り当てていませんでした。

export default class HomeArtist extends React.Component { 
constructor(props){ 
    super(props); 
} 
componentDidMount(){ 
    let ImageStore = document.getElementsByClassName('home-artist-display'); 
    console.log("ComponentDidMount: ", ImageStore); 
} 
render(){ 
    var ImageStyle = { 
     backgroundImage: "url("+this.props.info.image+")" 
    }; 
    return (
     <div className="home-artist-display" style={ImageStyle}> 
      <Link to={"artist/" + this.props.info.id}> 
       <h3 className="home-artist-name">{this.props.info.name}</h3> 
      </Link> 
     </div> 
    ) 
} 
} 

Answer 1

私はコンポーネントに（幅と高さの小道具との）サイズのオブジェクトを公開リアクトライブラリを書きました。あなたのユースケースについては

あなたはそうのようにそれを使用することができます。

import SizeMe from 'react-sizeme'; // import me! 

class HomeArtist extends React.Component { 
    ... 
    render(){ 
     // Size gets passed in as props! 
     const { width, height } = this.props.size; 

     var ImageStyle = { 
      backgroundImage: "url("+this.props.info.image+")" 
     }; 
     return (
      <div className="home-artist-display" style={ImageStyle}> 
       <Link to={"artist/" + this.props.info.id}> 
        <h3 className="home-artist-name">{this.props.info.name}</h3> 
       </Link> 
      </div> 
    ) 
    } 
} 

// wrap your component export! 
export default SizeMe()(HomeArtist); 

-

あなたが何をしようとするhttps://github.com/ctrlplusb/react-sizeme