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

問題是當我在菜單路段組件單擊出現瞬間消失，默認組件被顯示。無法在線找到任何特定的解決方案，請幫助我做錯了什麼。

來源

2016-11-14 Afnan Nazir

它的默認行爲，因爲你的渲染功能將被再次調用，你應該保持一個內部狀態「工程」 /「個人資料」，有你的渲染功能適應它。 –

問題是，當我們點擊href鏈接，然後由於其默認行爲頁面刷新和組件出現和消失，然後顯示默認組件。它的解決方案是我們上單擊傳遞事件，然後防止類似以下

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

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

來源

2016-11-18 13:54:14

我想這是因爲您卸載您嘗試和節點重新渲染到

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

我在想，因爲你是使用id =「main_data」卸載節點，並隨後嘗試裝入再次，你看到閃光燈。

來源

2016-11-14 09:36:33 Teedub

React組件出現並立即消失

回答

相關問題