Ich benutze Material Design Lite und reagiere. Ich habe es geschafft, dynamisch Tab hinzuzufügen, wenn ich separate Layouts und Tabs verwende, aber wenn ich versuche, mdl-layout__tab-bar mdl-js-ripple-effect zu verwenden, kann ich das Layout nicht aktualisieren, so dass das Tab nicht funktioniert. Diesedynamisch scrollbare Registerkarte hinzufügen mdl reagieren?
<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>;
ist meine Render-Funktion und die Registerkarte Element richtig hinzugefügt, aber wenn ich darauf klicke die Registerkarten-Panel wird nicht angezeigt.
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();
}
Ich versuchte alles, aber immer noch nicht die Tabs aktualisieren können;/ wird Irgendwelche Vorschläge sehr geschätzt werden.