Question

我有4个组成部分。应用程序组件应有尽有，菜单组件具有两个链接选项：“常规”和“评论”，以及我要隐藏/显示的两个组件：“常规”组件和“评论”组件。

如何使菜单组件最初显示“常规”组件，如果单击“评论”链接，它将隐藏“常规”组件并显示“评论”组件。然后，如果单击“常规”组件链接，它将隐藏“评论”组件并显示“常规”组件。因为不需要更改链接，所以不需要使用路由器，只需要隐藏和显示组件即可。

我的想法是在应用程序状态上添加活动状态，但不确定如何运行。

Answer 1

在您的App组件中，有一个状态项currentView，该状态项将保存您要显示的页面，或者使用if和else，或者在未选择选项时将其隐藏起来

class App extends React.Component {
    constructor() {
        this.state = {
            currentView: 'general' // general|reviews|etc...
        }
        this.changeView = this.changeView.bind(this);
    }

    changeView(viewName) {
        this.setState({
            currentView: viewName
        });
    }   

    render() {
        return (
            <div className="menu">
                {this.state.currentView !== 'general' && (
                    <a onClick={() => this.changeView('general')}>
                        General
                    </a>
                )}
                {this.state.currentView !== 'reviews' && (
                    <a onClick={() => this.changeView('reviews')}>
                        Reviews
                    </a>
                )}
            </div>
        );
    }
}

反应隐藏组件，无需反应路由器

1 个答案: