时间戳

首页 > 解决方案 > 状态更改未重新呈现组件概念问题

javascript - 状态更改未重新呈现组件概念问题

问题描述

我有以下 Javascript 代码

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isVisible: false};
    }
    render() {
        console.log('hi')
        return(
            <div className = 'navbar'>
                <div className = 'nav-button'
                    onClick = {() => this.setState({isVisible: !this.state.isVisible})}>
                </div>
           
                    <div className = 'navbar-content row'>
                        <div className="navbar-item col s1 offset-s6"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                    </div>
            </div>
        );
    }
}

当我单击“导航按钮”时，我应该调用 setState 来更改 isVisible 组件，因此该组件应该重新渲染，并且我应该期望控制台记录“hi”。然而，这并没有发生。我想知道为什么组件没有重新渲染。

但是，当我删除导航栏下方的 div 标签时，组件会成功重新渲染。

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isVisible: false};
    }
    render() {
        console.log('hi')
        return(
            <div className = 'navbar'>
                <div className = 'nav-button'
                    onClick = {() => this.setState({isVisible: !this.state.isVisible})}>
                </div>
           
     
            </div>
        );
    }
}

标签： javascriptreactjsrendersetstate

解决方案

div如果没有内容，您如何单击？我相信你错了，你一开始就触发了onClick。下面你可以看到一个简化的运行示例，它实际上是如何工作的（可点击的div现在有一个标签“测试”）。

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isVisible: false};
    }
    render() {
        console.log('hi')
        return(
            <div className = 'navbar'>
                <div className = 'nav-button'
                    onClick = {() => this.setState({isVisible: !this.isVisible})}>test
                </div>
                    <div className = 'navbar-content row'>
                        <div className="navbar-item col s1 offset-s6"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                    </div>
            </div>
        );
    }
}

ReactDOM.render(<Navbar />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

推荐阅读