当我添加带有react的选项卡时，其父元素已经升级。因此，调用upgradElement无效，并且添加的选项卡不起作用。什么解决方案，请使用容器重新创建所有选项卡并进行升级？在这种情况下，React只是更新DOM组件，我需要卸下组件？
如何在特定组件的componentDidUpdate阶段调用componentHandler.upgradeElement（）或componentHandler.upgradeDom（）
componentDidUpdate() {
componentHandler.upgradeElement(this.refs.myElement);
//or componentHandler.upgradeDom('MaterialTabs');
}
编辑1选项卡组件
componentDidUpdate() {
componentHandler.upgradeDom();
}
newTab() {
this.setState({
newtab: 1
});
}
render() {
return (<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header" key={this.state.newtab}>
<button onClick={this.newTab.bind(this)}>Add Tab</button>
<header className="mdl-layout__header">
<div className="mdl-layout__tab-bar mdl-js-ripple-effect">
<Link to="/tabtest" hash="#scroll-tab-1" className="mdl-layout__tab is-active">Tab 1</Link>
<Link to="/tabtest" hash="#scroll-tab-2" className="mdl-layout__tab">Tab 2</Link>
{ this.state.newtab ?
<Link to="/tabtest" hash="#scroll-tab-3" className="mdl-layout__tab">Tab 3</Link> : null}
</div>
</header>
<div className="mdl-layout__content">
<section className="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div className="page-content">Tab 1</div>
</section>
<section className="mdl-layout__tab-panel" id="scroll-tab-2">
<div className="page-content">Tab 2</div>
</section>
{ this.state.newtab ? <section className="mdl-layout__tab-panel" id="scroll-tab-3">
<div className="page-content">Tab 2</div>
</section> : null}
</div>
</div>);
}
我做了一些测试，可以重现该问题。有用的是将key属性放在tab组件的根元素上。添加新选项卡时，必须更改此键，并且做出反应将丢弃该组件并完全重新渲染。这样，所有的材料设计精简属性都将丢失，并且在调用upgradeDom或upgradeElement后可以正常工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句