Javascript Reactjs：如何从挂载的；部门>；？

假设我有一个react DOM元素，如下所示：

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

如果稍后访问此元素并尝试获取其宽度，如下所示：

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

我的控制台中有

120

。我的预期结果是

100

。因为我必须用原始宽度计算，所以我必须得到元素的padding属性

问题：如何在react类中获得组件的

paddingRight

属性

更新 有了@Mike'Pomax'Kamermans的输入，我就能够解决根本的问题（谢谢你）：只需在CSS中添加

box size:border box

。现在

getBoundingClientRect（）

给出的是

100

，而不是

120

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

您需要

---

反问题：如果您正在使用React，您不应该弄乱组件的样式，除非

props

（来自父级）或

state

（来自组件本身）发生更改，此时您的

render（）

函数负责生成“现在应该是什么样子”的ReactJS代码，然后，React使用它来生成一个diff，只将新旧内容之间的差异应用到DOM中。在一个更为HTML/CSS/JS的技术点上：右键单击浏览器中的元素，点击“inspect element”并查看计算框模型。浏览器显示它有多大？有,；旧的古怪模型将产生100px，现代的默认模型将产生120px。想想一个div，用户可以通过从左到右拖动鼠标来调整其大小。您可以在拖动（状态）期间添加一种

new\u width

道具，该道具在

render（）

方法中使用。不可以。通过给div一个resize处理程序，您可以让它负责自己的大小调整，然后当用户拖动组件（调用resize处理程序）时，根据事件值处理“现在应该是什么”宽度，然后绑定使用

this.setState（{width:computed}）

计算的新宽度，然后让渲染函数生成适当的内容，

这正是我要做的。您需要一个初始宽度来完成此操作。
componentDidMount () {
  var elem = this.refs.pickMe.getDOMNode().getBoundingClientRect()
  console.log(elem.width)
}

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