javascript - 如何从 React 访问样式？

Question

我试图在 React 中访问一个 div 的宽度和高度样式，但我遇到了一个问题。这是我到目前为止得到的:

componentDidMount()  {
  console.log(this.refs.container.style);     
}


render()  {
   return (
      <div ref={"container"} className={"container"}></div>  //set reff
   );
}

这有效，但我得到的输出是一个 CSSStyleDeclaration 对象，在 all 属性中我可以为该对象设置所有 CSS 选择器，但它们都没有设置。它们都设置为空字符串。

这是 CSSStyleDecleration 的输出:http://pastebin.com/wXRPxz5p

非常感谢任何有关查看实际样式(事件继承的样式)的帮助!

谢谢!

Answer 1

对于 React v <= 15

console.log( ReactDOM.findDOMNode(this.refs.container).style); //React v > 0.14

console.log( React.findDOMNode(this.refs.container).style);//React v <= 0.13.3

编辑:

For getting the specific style value

console.log(window.getComputedStyle(ReactDOM.findDOMNode(this.refs.container)).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;

For React v>= 16

使用回调样式或使用 createRef() 分配 ref。

assignRef = element => {
  this.container = element;
}
getStyle = () => {

  const styles = this.container.style;
  console.log(styles);
  // for getting computed styles
  const computed = window.getComputedStyle(this.container).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;
  console.log(computed);
}