Javascript ReactJS中的选项卡容器：仅渲染选定的子对象，而不是使用“显示：无”`

我在ReactJS中构建了一个简单的选项卡容器，容器组件在其状态下保持一个整数索引，表示要显示的选项卡窗格，然后仅呈现在该索引位置找到的子级（来自

this.props.children

数组）

这种方法的要点是：

const TabContainer = React.createClass({
    props: {
        tabNames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
    },
    getInitialState: function() {
        return {
            activeIndex: 0
        };
    },
    setTab: function(n) {
        this.setState({activeIndex: n});
    },
    render: function render() {
        const childToRender = this.props.children[this.state.activeIndex];
        return (
                <div className='tab-container'>
                <Tabs
                    tabNames= {this.props.tabNames}
                    active  = {this.state.active}
                    setTab  = {this.setTab}
                />
                <div className='tab-pane'>
                {childToRender}
                </div>
                </div>
        );
    }
});

const TabContainer=React.createClass({
道具：{
选项卡名：React.PropTypes.arrayOf（React.PropTypes.string）.isRequired
},
getInitialState:函数（）{
返回{
活动索引：0
};
},
setTab：函数（n）{
this.setState（{activeIndex:n}）；
},
render：函数render（）{
const childToRender=this.props.children[this.state.activeIndex]；
返回(
{childToRender}
);
}
});

也就是说，只选择并呈现索引子级（为了简单起见，我省略了处理边缘情况的代码，其中

this.props.children

不是

数组

）

我发现这种方法并不令人满意，因为当用户选择不同的选项卡时，与要渲染的窗格相对应的组件被反复装载和卸载，并且窗格的任何状态都无法保留

最后，我使用了一种方法，即渲染所有子窗格，并为除所选窗格之外的所有窗格分配一个类

隐藏

，然后使用该类将这些窗格设置为：

显示：无

。当这个后来的解决方案被使用时，我的窗格即使在用户点击各个选项卡之后仍然保持挂载状态，并且在用户循环浏览选项卡时，它们的任何状态都没有丢失

我的问题是：

最初的方法（仅呈现特定的子级）是反模式还是有其他机制可以用来保存单个窗格的状态或防止它们被卸载

如果最初的方法确实是一种反模式，那么如何更普遍地表达这种反模式呢

---

我认为最初的方法根本不是反模式。选择是否在逻辑中装载/卸载取决于您的环境。如果要保留状态，则不要卸载。如果您想要一个新的元素，需要调用

getInitialState

，那么卸载是正确的方法

作为一个简单的反例，考虑路由器的反应。路由器在路由更改时完全卸载/重新装载组件。而路径改变实际上只是一种更高阶的标签

---

但是考虑到你想保留国家的情况，我认为你的解决方案是正确的。您可能想看看material ui，它在选项卡中的作用非常类似：

在您的问题中，您是否有兴趣使用其他库来管理应用程序状态（例如redux），或者是否希望保持纯粹的reactjs application.Nice，这可能值得注意。我想知道

height=0；溢出和隐藏

（在您提供的链接中使用）在触发（或不触发）特定的ReactJS生命周期事件方面与display:none有任何不同，或者纯粹是风格上的。@MarcusJuniusBrutus在某些浏览器中，有些情况下display none会产生一些意外的副作用，例如，在显示该容器之前，img不会加载。或者就是这个问题