React中如何将含动态属性的样式对象转为className？

核心问题分析 #

你犯了两个关键错误：

• className 属性仅接受字符串类名，直接传入样式对象会被转为 [object Object]，这就是元素审查里显示对象的原因。
• 代码本身存在语法错误：deviceHeight 是箭头函数但未调用，样式对象属性间缺少逗号，document.height 已废弃（建议用 document.documentElement.clientHeight 获取视口高度）。

解决方案 #

方案1：使用React内联样式（最适合动态场景） #

React提供了style属性专门接收对象格式的样式，直接替换className即可，同时修复代码错误：

class MyHeader extends React.Component {
  // 改用标准API获取视口高度
  deviceHeight = () => `${document.documentElement.clientHeight}px`;

  render() {
    const mystyle = {
      height: this.deviceHeight(), // 调用函数获取动态高度值
      backgroundColor: "DodgerBlue" // 修复逗号缺失问题
    };
    return (
      <div>
        <h1 style={mystyle}>Hello Style!</h1> {/* 用style属性替代className */}
        <p>Add a little style!</p>
      </div>
    );
  }
}

方案2：转换为CSS类名（适合样式复用场景） #

如果一定要用类名，可以拆分静态样式到CSS类，动态样式仍用style属性补充：

1. 先在CSS文件中定义静态样式类：

.my-heading {
  background-color: DodgerBlue;
}

2. 在组件中结合类名和动态样式：

class MyHeader extends React.Component {
  deviceHeight = () => `${document.documentElement.clientHeight}px`;

  render() {
    return (
      <div>
        <h1 
          className="my-heading" 
          style={{ height: this.deviceHeight() }}
        >Hello Style!</h1>
        <p>Add a little style!</p>
      </div>
    );
  }
}

如果需要完全用类名实现动态样式，可以使用CSS Modules或styled-components这类CSS-in-JS库，比如用styled-components的写法：

import styled from 'styled-components';

// 定义带动态属性的样式组件
const StyledH1 = styled.h1`
  background-color: DodgerBlue;
  height: ${props => props.deviceHeight};
`;

class MyHeader extends React.Component {
  deviceHeight = () => `${document.documentElement.clientHeight}px`;

  render() {
    return (
      <div>
        <StyledH1 deviceHeight={this.deviceHeight()}>Hello Style!</StyledH1>
        <p>Add a little style!</p>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者SADAM