我试图在React中访问一个div的宽度和高度样式,但是遇到了一个问题,这是我目前得到的结果:
componentDidMount() {
console.log(this.refs.container.style);
}
render() {
return (
<div ref={"container"} className={"container"}></div> //set reff
);
}
这是可行的,但是我得到的输出是一个CSSStyleDeclaration对象,在all属性中,我可以为这个对象设置所有的CSS选择器,但是它们都没有被设置,它们都被设置为一个空字符串。
这是CSS样式声明的输出:http://pastebin.com/wXRPxz5p
任何帮助获得看到实际的风格(事件继承的)将不胜感激!
谢谢!
6条答案
按热度按时间oymdgrw71#
对于Reactv〈= 15
编辑:
用于获取特定样式值
对于Reactv〉= 16
使用回调样式或通过使用createRef()分配ref。
iezvtpos2#
以下是通过React Refs和
.getComputedStyle
方法计算CSS属性值的示例:u7up0aaq3#
值得注意的是,尽管ReactDOM.findDOMNode现在仍然可用,但将来它将取代回调引用。
这里有一篇Dan Abramov的帖子,概述了不使用findDOMNode的原因,同时提供了如何用回调引用替换ReactDOM.findDOMNode的示例。
因为我见过SO用户在答案中只包含一个链接时会感到不安,所以我将沿着Dan提供的一个示例:
查找DOM节点(字符串DOM引用)
xfb7svmp4#
您应该使用
ReactDOM.findDOMNode
方法并从那里开始工作。下面是您所需要的代码。jsFiddle
4dc9hkyq5#
如果是函数组件,则使用useRef Hook:
将ref属性添加到组件
谢谢
7vux5j2d6#
您已经获得了样式,CSSStyleDeclaration对象的props具有这么多空字符串值的原因是它链接到内部样式。
看看会发生什么,如果你做如下更改:
<div ref={"container"} className={"container"} style={{ width: 100 }}></div>