我试图在 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
任何有关查看实际样式（事件继承的样式）的帮助将不胜感激！
谢谢！
对于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
编辑：
用于获取特定的样式值
console.log(window.getComputedStyle(ReactDOM.findDOMNode(this.refs.container)).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;
对于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);
}
这是通过React Refs和.getComputedStyle方法计算 CSS 属性值的示例：
class App extends React.Component {
constructor(props) {
super(props)
this.divRef = React.createRef()
}
componentDidMount() {
const styles = getComputedStyle(this.divRef.current)
console.log(styles.color) // rgb(0, 0, 0)
console.log(styles.width) // 976px
}
render() {
return <div ref={this.divRef}>Some Text</div>
}
}
值得注意的是，虽然 ReactDOM.findDOMNode 今天可用，但将来会弃用它来代替回调引用。
Dan Abramov在这里发表了一篇文章，其中概述了不使用 findDOMNode 的原因，同时提供了如何用回调引用替换 ReactDOM.findDOMNode 的示例。
由于我看到 SO 用户在答案中只包含一个链接时会感到不安，因此我将传递 Dan 提供的示例之一：
**Before:**
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this.refs.something).scrollIntoView();
}
render() {
return (
<div>
<div ref='something' />
</div>
)
}
}
**After:**
class MyComponent extends Component {
componentDidMount() {
this.something.scrollIntoView();
}
render() {
return (
<div>
<div ref={node => this.something = node} />
</div>
)
}
}
您应该使用ReactDOM.findDOMNode方法并从那里开始工作。这是执行您需要的代码。
var Hello = React.createClass({
componentDidMount: function() {
var elem = ReactDOM.findDOMNode(this.refs.container);
console.log(elem.offsetWidth, elem.offsetHeight);
},
render: function() {
return (
<div ref={"container"} className={"container"}>
Hello world
</div>
);
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
您已经获得了样式，CSSStyleDeclaration 对象的 props 具有如此多空字符串值的原因是它与内部样式的链接。
看看如果您进行如下更改会发生什么：
<div ref={"container"} className={"container"} style={{ width: 100 }}></div>