创建组件后丢失动画

Question

我想使用在“Material UI”中创建的“Tabs”组件。

“材质 UI”标签演示：https://material-ui.com/components/tabs/

render() {
  <div>
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
    >
      <Tab label="First label" />
      <Tab label="Second label" />
    </Tabs>
  </div>
 }


 handleChange = () => {
   this.setState({
     value: !this.state.value
   })
 }

当我使用上面的代码时，一切都很好，当我点击第二个或第一个标签时，我可以看到改变标签位置的漂亮动画。

但是当我想创建一个新组件时：

const NewTabs = (props) => {
  return (
    <div>
      <Tabs
        value={props.value}
        onChange={props.handleChange}
      >  
        <Tab label={props.firstLabel} />
        <Tab label={props.secondLabel} />
      </Tabs>
    </div>
  )
}

export default NewTabs

并传递如下数据：

render() {
  <div>
    <NewTabs 
      value={this.state.value}
      handleChange={this.handleChange}
      firstLabel= "First test label"
      secondLabel = "Second test label"
     />
  </div>
}

handleChange = () => {
   this.setState({
     value: !this.state.value
   })
 }

然后一切正常，但是改变选项卡位置的动画不可见。

为什么会发生这种情况，如果我想使用新创建的组件，如何才能看到动画？

Answer 1

我认为这是因为状态保存在父级中，并且每次状态更改时都会导致完全重新渲染，因此您不会看到动画。

您可以在NewTabs 中拥有状态，而不是从父级传递它？

class NewTabs extends React.Component{

   handleChange = () => {
      this.setState({
        value: !this.state.value
      })
    }

  render(){
   return (
    <div>
      <Tabs
        value={state.value}
        onChange={this.handleChange}
      >  
        <Tab label={props.firstLabel} />
        <Tab label={props.secondLabel} />
      </Tabs>
    </div>

   )
  }
}

class App extends React.Component{
  render() {
    <div>
      <NewTabs 
        firstLabel= "First test label"
        secondLabel = "Second test label"
       />
    </div> 
  }
}