React组件出现并立即消失

问题描述：

我得到了一个任务，我必须在div中显示不同的组件，具体取决于菜单上的点击。以前，这些显示在标签中（并且它们工作正常），现在我必须移除标签并显示菜单。我的代码是这样的React组件出现并立即消失

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> 
) 
}

问题是当我在菜单路段组件单击出现瞬间消失，默认组件被显示。无法在线找到任何特定的解决方案，请帮助我做错了什么。

它的默认行为，因为你的渲染功能将被再次调用，你应该保持一个内部状态“工程” /“个人资料”，有你的渲染功能适应它。 –

答

问题是，当我们点击href链接，然后由于其默认行为页面刷新和组件出现和消失，然后显示默认组件。它的解决方案是我们上单击传递事件，然后防止类似以下

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

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

答

我想这是因为您卸载您尝试和节点重新渲染到

ReactDOM.unmountComponentAtNode(document.getElementById('main_data')); 
    if (name == 'projects') { 
     ReactDOM.render(<ListProjects parentThis = {this} />, document.getElementById('main_data')) 
    }

我在想，因为你是使用id =“main_data”卸载节点，并随后尝试装入再次，你看到闪光灯。

React组件出现并立即消失

相关推荐