可以说我有一个类似的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。由于我必须使用原始宽度进行计算,因此必须获取元素的填充属性。

问题:如何在我的react-class中获得组件的paddingRight属性?

更新资料
使用@Mike'Pomax'Kamermans的输入,我能够解决潜在的问题(谢谢您):只需在CSS中添加box-sizing: border-box即可。现在,getBoundingClientRect()给出100而不是120

我仍然不知道如何从已挂载的div获取CSS类属性-有什么建议吗?

最佳答案

您需要window.getComputedStyle

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

10-05 20:49
查看更多