反応成分が現れて瞬時に消える

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(); 
     ... 
} 

Answer 2

は、私はそれはあなたがしようとすると、ノードアンマウントので

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

私はあなたがして、ID =「main_data」でノードをアンマウントしているので、その後にマウントしようとすることを考えているに再レンダリングだと思いますもう一度、あなたはフラッシュを見ている。