React组件外const与组件内static的区别及static属性调用异常问题

问题原因 #

• static 关键字声明的类属性是挂载在类本身上的，不属于类的实例对象
• 你在 render 方法中通过 this.ownStyle 访问的是实例属性，而 ownStyle 被声明为静态属性时，实例的 this 上不存在该属性，最终拿到的是 undefined
• React 框架中如果给 DOM 元素的 style 属性传入 undefined，会直接忽略该属性，所以生成的 HTML 中没有 style 属性，也不会触发任何报错，属于框架的默认处理逻辑

修复方案 #

你可以二选一修改：

1. 保留静态属性，修改访问方式，直接通过类名访问静态属性

class ThemeToggler extends React.Component {
    static ownStyle = { cursor: "pointer" };
    render() { return (<div style={ThemeToggler.ownStyle}>Toggle theme</div>); }
}

2. 去掉 static 关键字，将属性改为实例属性，保持原访问逻辑不变

class ThemeToggler extends React.Component {
    ownStyle = { cursor: "pointer" };
    render() { return (<div style={this.ownStyle}>Toggle theme</div>); }
}

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