在 React 中使用 setState 更改样式属性答案

【问题标题】：Changing style property with setState in React在 React 中使用 setState 更改样式属性
【发布时间】：2018-02-03 19:39:18
【问题描述】：

问你这个问题我有点不好意思，因为我相信解决这个问题很简单，而且是基本的。但我仍然坚持这一点。

我想改变我的风格，例如。当 onscroll 事件触发时，我的 div 的 backgroundColor，但这似乎不起作用。在尝试像这样设置它时 backgroundColor:this.state.backgroundColor, 出现错误：Cannot read property 'state' of undefined

提前致谢！

这是我的代码：

import React, { Component } from 'react';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: 'black',
        };
    }

    componentDidMount() {
        const headerElement = this.refs.header;
        const sticky = headerElement.offsetTop;
        window.addEventListener('scroll', () => this.handleScroll(sticky)); 
    }

    handleScroll(sticky) {
        if (window.pageYOffset >= sticky) {
            this.setState({
                backgroundColor: 'yellow'
            });
        }
    }

    render() {
        const { containerStyle } = styles;
        return (
            <header style={containerStyle} ref='header'> {this.props.text} </header>
        );
    }
}

const styles = {
    containerStyle: {
        backgroundColor: this.state.backgroundColor,
    }
};

export default Header;

【问题讨论】：

标签： css reactjs

【解决方案1】：

不必羞于提问，我还没有遇到一个还不是学生的开发人员，包括我自己。 :)

您的 styles 变量超出范围。您需要将其移至您的 render() 函数中。

查看这里的工作代码：https://codesandbox.io/s/3rynvvn18m?module=%2Fheader.js

【讨论】：

如果您正在处理功能组件怎么办？我正在尝试直接从状态设置 css 类，但即使状态发生变化，这些类也没有按预期变化。
codesandbox.io/s/reverent-morse-hr15t?file=/src/Navbar/… 我只是想使用 CDN 链接构建一个带有引导类的自定义导航栏。检查 NavBar 组件。我可以通过 console,log() 看到状态变化，但类保持不变。我还没有把所有其他代码都放在沙盒里。
您需要将所有代码添加到沙箱中，否则我只有一半可用的信息。
我的意思是我已经把我要创建的导航栏组件所需的所有代码都放入了。

【解决方案2】：

好吧，只要不接触打字稿的基础知识就不要迁移到 React。 let 和 const 具有它们的块范围，并且只能在该块内访问。不要将它与 var 混淆，如果声明为外部函数，则它是全局的。如果上述接受的答案让您感到羞辱，请不要担心。我们都去过那里。我们会犯错，我们会学习。

【讨论】：