Question

我使用Tabs创建了一个react组件，它在初始加载时没有工作，但是在我重新加载页面后就可以工作了。

我的渲染功能如下

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

当我使用react路由器加载组件时未加载选项卡，但如果我手动刷新页面，它会完全加载。

Answer 1

基于react-materialize github repo中的问题ID＃196。

此问题已在0.17.7版本中修复

https://github.com/react-materialize/react-materialize/issues/196

选项卡/选项卡无法在react-materialize中初始加载

1 个答案: