时间戳

首页 > 解决方案 > “const”外部组件和“static”内部组件之间的区别？

javascript - “const”外部组件和“static”内部组件之间的区别？

问题描述

我明白为什么会这样：

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

但为什么不这样做：

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

在第二种情况下，甚至没有创建呈现的 HTML 中的样式属性，我在调试终端和浏览器检查部分都没有看到任何错误。任何人都知道为什么第二个代码不起作用？

非常感谢您提前。

标签： javascriptreactjs

解决方案

在您的第二个示例中，该ownStyle属性属于该类 ThemeToggler而不是该类的实例。

这意味着您应该在类上访问它ThemeToggler而不是使用this（指的是该类的当前实例）：

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

推荐阅读