React.js：如何从已安装的CSS类属性 <div> ？

Question

Lets say I have a react DOM element like this one:

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

CSS:

.widePaddingRight{
  paddingRight: 20px
}

If I access this element later and try to get its width like that:

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

I get 120 in my console. My expected result was 100 . Since I have to calculate with the original width I have to get the padding-attributes of the element.

Question: How can I get the paddingRight attribute of my component in my react-class?

Update With the input of @Mike 'Pomax' Kamermans I was able to solve the underlying problem (thank you for that): Just add box-sizing: border-box to the CSS. Now getBoundingClientRect() gives 100 instead of 120 .

I still dont know how to get a css class-attribute from a mounted div - any suggestions?

Answer 1

您需要window.getComputedStyle 。

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