动态添加选项卡 upgradeElement

Question

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

Answer 1

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

强制更新

void forceUpdate( [函数回调] )

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

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

通常你应该尽量避免使用 forceUpdate() 并且只在 render() 中读取 this.props 和 this.state。这使您的组件 "pure" 和您的应用程序更加简单和高效。

Answer 2

具体组件的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 and Material-Design-Lite

Material-Design-Lite source

Answer 3

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

为周围的 .mdl-js-tabs div 元素提供制表符作为 key 属性。

每当添加一个选项卡时，键都会改变，React 将重新呈现整个选项卡组件。这将随后进行 MDL 升级。

动态添加选项卡 upgradeElement

Adding tab dynamically upgradeElement

javascript

reactjs

material-design-lite