動態添加可滾動選項卡mdl反應？

Question

我正在使用材料設計lite並作出反應。我設法添加動態選項卡時使用單獨的佈局和標籤，但當我嘗試使用mdl-layout__tab-bar mdl-js-ripple-effect我無法更新佈局，因此選項卡無法正常工作。

<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
     <header className="mdl-layout__header"> 
      <div className="mdl-layout__header-row"> 
       <span className="mdl-layout-title">Title</span> 
      </div> 
      <div className="mdl-layout__tab-bar mdl-js-ripple-effect"> 
       { 
        this.state.tabs.map((tab, i) => { 
         let tabId = '#' + tab.id; 
         let className = 'mdl-layout__tab'; 
         tab.active ? className += ' is-active' : className + ''; 

         return <a key={i} href={tabId} className={className}>{tab.name}</a> 
        }) 
       } 
       <a key={this.state.tabs.length} href='#add-new' 
        className={'mdl-layout__tab ' + ADD_NEW}>+</a> 
      </div> 
     </header> 
     <div className="mdl-layout__drawer"> 
      <span className="mdl-layout-title">Title</span> 
      <nav className="mdl-navigation"> 
       <a className="mdl-navigation__link" href="">Link</a> 
       <a className="mdl-navigation__link" href="">Link</a> 
       <li> 
        <hr/> 
       </li> 
       <span className="asdf"> 
        <a className="mdl-navigation__link" href="">Add new</a> 
       </span> 
      </nav> 
     </div> 
     <main className="mdl-layout__content"> 
      { 
       this.state.tabs.map((tab, i) => { 
        return <Tab key={i} id={tab.id} active={tab.active} content={tab.content}/> 
       }) 
      } 
      <Tab key={this.state.tabs.length} id='add-new' active={false}></Tab> 
     </main> 
    </div>; 

這是我的渲染功能和標籤元素添加正確，但是當我點擊它時，標籤面板不顯示。

componentDidUpdate() { 
    if (!this.layout) { 
     this.layout = MaterialLayout.apply(MaterialLayout.prototype,[document.getElementsByClassName('mdl-layout')[0]]); 
    } 
    let id = this.state.tabs[this.state.tabs.length - 1].id; 
    let tabs = document.getElementsByClassName('mdl-layout__tab-bar')[0].getElementsByTagName('a'); 
    let panels = document.getElementsByClassName('mdl-layout__content')[0].getElementsByClassName('mdl-layout__tab-panel '); 
    MaterialLayoutTab(document.getElementsByTagName("a[href=" + id + "]"), tabs, panels, this.layout); 
    this.registerListener(); 
    componentHandler.upgradeDom(); 
} 

我想什麼，但還是不能升級的卡口/ 任何建議將高度讚賞。

Answer 1

找到了解決方案：

componentDidUpdate() { 
if (!this.layout) { 
    this.layout = document.getElementsByClassName('mdl-layout')[0]; 
} else { 
    let id = '#' + this.state.tabs[this.state.tabs.length - 1].id; 
    let tabs = document.getElementsByClassName('mdl-layout__tab-bar')[0].getElementsByTagName('a'); 
    let panels = document.getElementsByClassName('mdl-layout__content')[0].getElementsByClassName('mdl-layout__tab-panel '); 
    console.log(tabs); 
    for (let tab of tabs) { 
    //document.querySelectorAll("a[href='" + id + "']" 
    new MaterialLayoutTab(tab, tabs, panels, this.layout.MaterialLayout); 
    } 
} 
this.registerListener(); 
}