如何从React访问样式？ [英] How to Access styles from React?

问题描述

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

I am trying to access the width and height styles of a div in React but I have been running into one problem. This is what I got so far:

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


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

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

This works but the output that I get is a CSSStyleDeclaration object and in the all property I can all the CSS selectors for that object but they none of them are set. They are all set to an empty string.

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

This is the output of the CSSStyleDecleration is: http://pastebin.com/wXRPxz5p

任何帮助查看实际样式（事件继承的样式）将非常感谢！

Any help on getting to see the actual styles (event inherrited ones) would be greatly appreciated!

谢谢！

推荐答案

这样做

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

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

编辑：

p>

For getting the specific style value

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

这篇关于如何从React访问样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！