css - 使用 React 时查找元素的宽度？

Question

我可以在 React 组件生命周期的哪个点获取在 css 文件中设置的组件 css 属性？

我已经在 render 方法和 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

我写了一个 React 库，它向组件公开一个 size 对象(带有宽度和高度属性)。

对于您的用例，您可以像这样使用它:

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 找到完整的详细信息