Reactjs：如何从安装的 <div> 中获取 css-class 属性？

Question

假设我有一个像这样的 react DOM 元素：

render () {
  ...
  return (
    <div className = "widePaddingRight" style = {{width: "100px"}}
      ref = "pickMe"
    >
      ...
    </div>
  )
}

CSS：

.widePaddingRight{
  paddingRight: 20px
}

如果我稍后访问此元素并尝试获得其宽度：

componentDidMount () {
  var elem = this.refs.pickMe.getDOMNode().getBoundingClientRect()
  console.log(elem.width)
}

我进入120了我的控制台。我的预期结果是100。由于我必须使用原始宽度进行计算，因此我必须获得元素的填充属性。

问题：如何paddingRight在我的 react-class 中获取组件的属性？

更新 通过@Mike 'Pomax' Kamermans 的输入，我能够解决潜在的问题（谢谢）：只需添加box-sizing: border-box到 CSS。现在getBoundingClientRect()给出100而不是120.

我仍然不知道如何从已安装的 div 中获取 css 类属性 - 有什么建议吗？

Answer 1

你需要window.getComputedStyle.

const style = window.getComputedStyle(React.findDOMNode(this.refs.pickMe));