Question

当我添加带有react的选项卡时，其父元素已经升级。所以调用upgradElement没有任何效果，添加的选项卡也不起作用。什么解决方案，重新使用容器的所有选项卡并升级它？在这种情况下，我只需要更新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>);

    }

我做了一些测试，可以重现这个问题。将键属性放在选项卡组件的根元素上有什么帮助。添加新选项卡时，此键必须更改，并且反应将丢弃组件并完全重新呈现。这样，所有material-design-lite属性都会丢失，并且在调用upgradeDom或upgradeElement之后它会起作用。

React and Material-Design-Lite

Material-Design-Lite source

Answer 2

来自https://facebook.github.io/react/docs/component-api.html。

forceUpdate

void forceUpdate（ [功能回调] ）

默认情况下，当组件的状态或道具发生更改时，组件将重新呈现。但是，如果这些隐式更改（例如：对象内部的数据更改而不更改对象本身）或者如果render（）方法依赖于其他一些数据，则可以告诉React需要通过调用重新运行render（） forceUpdate（）。

调用forceUpdate（）将导致在组件上调用render（），跳过shouldComponentUpdate（）。这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate（）方法。如果标记发生变化，React仍然只会更新DOM。

通常你应该尽量避免使用forceUpdate（），只能在render（）中读取this.props和this.state。这使您的组件“纯粹”，您的应用程序更简单，更高效。

Answer 3

为了突出Christian Steinmann答案中最重要的部分：

将标签周围的.mdl-js-tabs div元素计为key属性。

每当添加一个标签时，密钥都会改变，React将重新渲染整个标签组件。这将是MDL升级。

动态添加标签upgradeElement

3 个答案: