javascript - React 在每个 Material ui 选项卡开关上重新创建我的组件

Question

我在我的应用程序中添加了一个 Material UI Tabs 组件，其编码与他们的 Simple Tabs demo 中的组件几乎相似。 .

不过，我正在体验每个选项卡内的组件——即那些位于:

render() {
    /... 
    {
        value === 0 && < MyComponent1 / >
    } {
        value === 1 && < MyComponent2 / >
    } {
        value === 2 && < MyComponent3 / >
    }
    /...
}

正在重新创建(我可以在它们的构造函数中使用 console.log() 跟踪它)每次我切换标签时失去它们的状态，而我希望它们只是被卸载和重新安装.

我是做错了什么还是这是正常行为？

Answer 1

这是组件的预期行为。在它被安装之前，构造函数被调用。如果您不确定流程，可能值得重新阅读文档

https://reactjs.org/docs/react-component.html#constructor

如果您希望组件在隐藏/显示时保持状态，您可以传递一个标志(或 className)来指示是否隐藏组件。

render() {
  /... 
  < MyComponent1 hidden={value === 0} / >
  < MyComponent2 hidden={value === 1} / >
  < MyComponent3 hidden={value === 2} / > 
  /...
}

然后组件可以使用 prop 更新显示的内容，同时仍保留状态。例如你可以添加一个用 css 隐藏它的类。