React在每个材质ui制表符开关上重新创建我的组件

Question

我在我的应用程序中添加了一个Material UI Tabs组件，其编码几乎与Simple Tabs演示中的组件类似。

不过，我正在体验每个标签内的组件 - 即：

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

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

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

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隐藏它的类。

Answer 2

这个是正常的。 因为状态会重置每个组件卸载。 如果您不想丢失组件的状态，可以将其存储在redux中，也可以从父组件的props中设置新状态。

render() {
  return (
    {value === 0 && <MyComponent1 someProps={prop} />}        
    {...}
  )
}

在儿童部分

constructor(props){
  super(props);
  this.state = {
     param: props.someProps
  }
}

但无论如何最好的方法是使用redux。