如何从 React 访问样式？

小能豆

如何从 React 访问样式？

javascript

我正在尝试访问 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

如能得到任何有关了解实际样式（事件继承的样式）的帮助，我们将不胜感激！

阅读 37

2024-06-10

共1个答案

小能豆

要访问应用于元素的实际样式（包括继承的样式），您应该使用函数，getComputedStyle而不是直接访问style元素的属性。该style属性仅返回直接应用于元素的内联样式，而不是继承或计算的样式。

您可以按照以下方式修改代码以访问 div 的计算样式container：

componentDidMount() {
  const containerStyles = window.getComputedStyle(this.container);
  console.log(containerStyles);
}

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

在此更新版本中：

我们使用回调 ref 函数而不是字符串 ref 来将元素分配container给this.container。
在中componentDidMount，我们使用window.getComputedStyle来获取元素的计算样式container。
我们将containerStyles对象记录到控制台，其中包含应用于元素的所有计算样式，包括继承的样式。

通过使用getComputedStyle，您将能够看到应用于container元素的所有样式，包括继承的样式。

2024-06-10