Потеря анимации после создания компонента - PullRequest
Новая
       8

Потеря анимации после создания компонента

0 голосов
/ 23 июня 2019

Я хочу использовать компонент «Tabs», созданный в «Material UI».

Демонстрация вкладок «Material 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
   })
 }

Тогда все работает, но анимация изменения положениявкладки не видно.

Почему это происходит и как я могу увидеть анимацию, если я хочу использовать новый созданный компонент?

1 Ответ

0 голосов
/ 23 июня 2019

Я думаю, что это происходит из-за того, что состояние сохраняется в родительском объекте, и оно будет вызывать полный повторный рендеринг при каждом изменении состояния, поэтому вы не увидите анимацию.

Вы могли бы иметь состояние в 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> 
  }
}
...