javascript - Meteor + React 中的错误消息 "state is not defined"。

标签 javascript reactjs scroll

这个函数有什么问题,我尝试在滚动时淡入导航栏,但它在以下函数中引发错误?

const opacity = Math.min(100/state.alturaActualScroll, 1);

我有我的导航栏组件,但告诉我状态尚未定义,但我不知道,因为错误,这是我的代码

import React from 'react';
import {Link} from 'react-router'
import { Accounts } from 'meteor/accounts-base';
import {Meteor} from 'meteor/meteor';

export default class NavbarLanding extends 
React.Component {


    componentDidMount() {
        window.onscroll =()=> {
            this.setState({
                alturaActualScroll: window.scrollY})
        }
    }
    componentDidMount () {
        window.onscroll =()=>{
            nuevaAlturaScroll = Math.ceil(window.scrollY / 50) *50;
            if(this.state.alturaActualScroll != nuevaAlturaScroll){
                this.setState({alturaActualScroll:nuevaAlturaScroll})
            }
        }
    }
      // update
    render() {
        // console.log('donde estoy');
        const opacity = Math.min(100/state.alturaActualScroll, 1);
        return(
        <div style={opacity}id="navbar"className="navbar-landing">
            <nav>
                <div>
                        <ul className="ul-landing">
                                {/* <img src="./public/images/flat-rocket.jpg"></img> */}
                                <li id="navbar-landing-title" className="navbar-title"><a>Landing </a></li>
                            <div id="menu-landing"className="navbar-menu">
                                <li><a>acerca</a></li>
                                <li><a>portafolio</a></li>
                                <li><a>contacto</a></li>
                                <button className="btn"onClick={() => Accounts.logout()}>Logout</button>
                            </div>
                        </ul>
                </div>
             </nav>
        </div>  
        );
    };
}   

NavbarLanding.reactProptype = {
    title: React.PropTypes.string.isRequired
};

最佳答案

你的代码应该是

const opacity = Math.min(100/this.state.alturaActualScroll, 1);

您在访问组件状态时忘记添加 this 关键字,这导致解释器查找名为 state 的局部变量而不是类级别状态变量。

根据 Felix Kling 和 zerkms 的评论进行编辑和更正

关于javascript - Meteor + React 中的错误消息 "state is not defined"。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46751068/

相关文章:

javascript - 求减少后数组中的字符总数

javascript - 从 Dropzone 中的服务器加载的文件显示在队列中

html - 无法为登录页面设置确切的 css

html - 如何 float 顶栏?

javascript - 如何将二进制数转换为带符号的十进制数

reactjs - 如何让 React 响应媒体查询?

reactjs - setState 值在 react 中没有改变

jquery - div水平滚动时暂停垂直滚动,水平滚动结束时继续垂直滚动

javascript - 禁止滚动文本

javascript - 如果在循环中运行,匿名函数会占用内存吗