reactjs - React组件瞬间出现又消失

Question

我收到了一项任务，我必须根据菜单上的点击在 div 中显示不同的组件。以前这些显示在选项卡中(并且它们工作正常)，现在我必须删除选项卡并显示菜单。 我的代码是这样的

handleClick: function (name) {
     ReactDOM.unmountComponentAtNode(document.getElementById('main_data'));
        if (name == 'projects') {
            ReactDOM.render(<ListProjects parentThis = {this} />, document.getElementById('main_data'))
        }
        else if (name == 'profile') {
            ReactDOM.render(<div className="inner clearfix">
                    <Avatar parentThis = {this}/>
                            </div>,
                document.getElementById('main_data'))
        }

render: function () {
return (
<div className="row">
                        <div className="col-sm-12">
                            <div className="user-menu">
                                <ul className="dropdown clearfix boxed">
                                    <li key="1"><a href="#" onClick={()=>this.handleClick('projects')}><span>Projects</span></a></li>
                                    <li key="2"><a href="#" onClick={()=>this.handleClick('profile')}><span>Profile</span></a></li>
                                </ul>
                            </div>
                            <div id="main_data">
                              <ListProjects parentThis = {this} />
                            </div>
                        </div>
                    </div>
)
}

问题是当我单击菜单链接组件时立即出现并消失，并且显示默认组件。无法在线找到任何具体的解决方案，因此请帮助我做错了什么。

Answer 1

问题是，当我们单击 href 链接时，由于其默认行为，页面刷新，组件出现并消失，然后显示默认组件。 它的解决方案是我们在点击时传递事件，然后阻止其默认行为，如下所示

<li key="2"><a href="#" onClick={(evt)=>this.handleClick(evt, 'profile')}><span>Profile</span></a></li>

handleClick: function (event, name) {
        event.preventDefault();
        ...
}