Question

我觉得有点惭愧地问你这个问题因为我认为解决这个问题非常简单，而且这是基本的。但我仍坚持这一点。

我想改变我的风格，例如。我的backgroundColor，当onscroll事件触发时我的div，但这似乎不起作用。尝试设置它像backgroundColor：this.state.backgroundColor，出现错误：无法读取未定义的属性“状态”

提前致谢！

这是我的代码：

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;

Answer 1

没有必要羞于提问，我还没有见到一个不是学生的开发人员，包括我自己。：）

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

请点击此处查看工作代码：https://codesandbox.io/s/3rynvvn18m?module=%2Fheader.js

Answer 2

好吧，不要在不接触打字稿基础知识的情况下转向 React。 let 和 const 具有它们的块作用域，并且只能在该块内访问。不要将它与 var 混淆，如果在函数外部声明，则它是全局的。如果上述接受的答案让您感到丢脸，请不要担心。我们都去过那里。我们会犯错，我们也会学习。

在React

2 个答案: