タブ/タブが反応マテリアライズの初期ロードで機能しない

タブを使用して反応コンポーネントを作成しました。初期ロードでは機能しませんが、ページをリロードすると機能します。タブ/タブが反応マテリアライズの初期ロードで機能しない

私は機能をレンダリング私はルータを使用して反応するコンポーネントをロードする際

<Tabs className='tab-demo z-depth-1'> 
    <Tab title="Components" active> 
     <form className="col s12"> 
     <div className="row"> 
      <div className="input-field col s5"> 
       <input id="file_search" type="text" className="validate" /> 
       <label htmlFor="file_search">Search</label> 
      </div> 
      <div style={styles.restorecomp}> 
       <span className="btn indigo darken-4 selectdrop" onClick={this.open}><i className="material-icons left">restore</i> Restore a Component</span>&nbsp;&nbsp;&nbsp;&nbsp; 
       <span className="btn indigo darken-4 selectdrop" onClick={this.save} ><i className="material-icons left">save</i> Save</span> 
      </div> 
     </div> 
     </form> 
     <table className="highlight centered" id="files"> 
     <thead> 
      <tr> 
       <th data-field="comp"> Name</th> 
       <th data-field="type">Type</th> 
       <th data-field="version">Version</th> 
       <th data-field="user">Data Source</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
     </table> 
    </Tab> 
    <Tab title="Data Sources"> 
     <form className="col s12"> 
     <div className="row"> 
      <div className="input-field col s5"> 
       <input id="ds_search" type="text" className="validate" /> 
       <label htmlFor="ds_search">Search</label> 
      </div> 
      <div style={styles.restorecomp}> 
       <span className="btn indigo darken-4 selectdrop" onClick={this.dsopen}><i className="material-icons left">restore</i> Restore DataSource</span>&nbsp;&nbsp;&nbsp;&nbsp; 
       <span className="btn indigo darken-4 selectdrop" onClick={this.save}><i className="material-icons left">save</i> Save</span> 
      </div> 
     </div> 
     </form> 
     <table className="highlight centered" id="ds"> 
     <thead> 
      <tr> 
       <th data-field="comp"> Alias</th> 
       <th data-field="tname"> Name</th> 
       <th data-field="connection">Connection</th> 
       <th data-field="type">Type</th> 
       <th data-field="version">Version</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
     </table> 
    </Tab> 
    <Tab title="Files"> 
     <form className="col s12"> 
     <div className="row"> 
      <div className="input-field col s5"> 
       <input id="fv_search" type="text" className="validate" /> 
       <label htmlFor="fv_search">Search</label> 
      </div> 
      <div style={styles.restorecomp}> 
       <span className="btn indigo darken-4 selectdrop" onClick={this.fileopen}><i className="material-icons left">restore</i> Restore a File</span>&nbsp;&nbsp;&nbsp;&nbsp; 
       <span className="btn indigo darken-4 selectdrop" onClick={this.save}><i className="material-icons left">save</i> Save</span> 
      </div> 
     </div> 
     </form> 
     <table className="highlight centered" id="fv"> 
     <thead> 
      <tr> 
       <th data-field="comp">Name</th> 
       <th data-field="type">Path</th> 
       <th data-field="version">Version</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
     </table> 
    </Tab> 
</Tabs>

以下のようにタブがロードされていないが、私は手動でページを更新した場合、それは完全にロードされます。

出典

2016-12-14 Arunkumar Palanippan