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

Answer 2

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

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

和子组件

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

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

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

2 个答案: