Question

当我单击页脚中的链接时，我正在渲染我的组件，但是该元素几乎立即被重新渲染了。

class Footer extends Component {
constructor(props) {
    super(props);
    this.state = {
        privacyVisibile: false
    };
    this.togglePrivacyVisible = this.togglePrivacyVisible.bind(this)
}

togglePrivacyVisible = () => {
    const { privacyVisibile } = this.state;
    this.setState({ privacyVisibile : !privacyVisibile })
}

render() {
    return (
        <div>
            {this.state.privacyVisibile && <Privacy />} 
            <ul className="footer-menu">
                <li><a href="about.html">About</a></li>
                <li onClick= {this.togglePrivacyVisible}>Privacy</li>
            </ul>                            
        </div>
    )
 }
}

export default Footer;

如果我将状态渲染从我的UL上方移到了它的下方，则在尝试切换时它根本不渲染。

我已经看到重启我的应用程序的建议，但这似乎没有任何效果，还有其他想法可能在这里发生吗？

Answer 1

单击链接后，浏览器将离开该页面，并尝试加载privacy.html页面。尝试使用按钮代替链接，不要使用href：

<button onClick={this.togglePrivacyVisible}>Privacy</button>

Answer 2

您可以使用Has Attribute selector来防止单击锚标记的默认操作。喜欢：

togglePrivacyVisible = (event) => {
    event.preventDefault();
    const { privacyVisibile } = this.state;
    this.setState({ privacyVisibile : !privacyVisibile })
}

Answer 3

我认为您不需要在函数中使用箭头函数语法并在构造函数中使用bind（this）。不知道这是否会导致奇怪的行为，但您应该使用其中一个。

反应状态切换渲染不持久

3 个答案: