动态添加选项卡升级元素

Question

当我添加带有反应的选项卡时，其父元素已经升级。所以调用 upgradElement 没有效果，添加的选项卡不起作用。什么解决方案，用容器重新创建所有选项卡并升级它？在这种情况下，React 只是更新 DOM 组件，我需要卸载组件？

Answer 1

如何在特定组件的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 属性放在选项卡组件的根元素上。添加新选项卡时，此键必须更改，并且 react 将丢弃组件并完全重新渲染。这样，所有 material-design-lite 属性都会丢失，并且在调用 upgradeDom 或 upgradeElement 后它可以工作。

React 和 Material-Design-Lite

Material-Design-Lite 源