React - CSSTransitionGroup не работает с динамическим контентом - PullRequest
Новая
       18

React - CSSTransitionGroup не работает с динамическим контентом

0 голосов
/ 11 апреля 2019

Я пытаюсь оживить мой div, который содержит раскрывающийся список при нажатии.Есть состояние, которое контролирует, когда раскрывающийся список открывается или закрывается, и называется locationOpen

  constructor(props: Props) {
    super(props);
    this.state = {
      onDesktop: false,
      locationOpen: false,
      currentCity: '',
    };
    this.locationSelectDataBuilder = new LocationSelectDataBuilder({
      locale: getCurrentLocale(),
    });
  }

  handleLocationClick = () => {
    this.setState({ locationOpen: !this.state.locationOpen });
  };

<React.Fragment>
<div onClick={this.handleLocationClick}>
<p
  className={cx({
    [css.locationSelect]: true,
    [css.locationSelectText]: true,
  })}
>
  {currentCity}
</p>
</div>
{locationOpen && (
<CSSTransitionGroup
  transitionName={{
    enter: css.hide,
    enterActive: css.fromHideToShow,
    enterDone: css.show,
    exit: css.show,
    exitActive: css.fromShowToHide,
    exitDone: css.hide,
  }}
  transitionEnterTimeout={1500}
  transitionLeaveTimeout={1500}
>
  <div className={css.locationDropdownList}>
    {this.locationSelectDataBuilder.selectData().map(selectGroup => (
      <ul key={selectGroup.key}>
        <li
          key={selectGroup.key}
          label={selectGroup.name}
          className={css.locationDropdownCountry}
        >
          {selectGroup.name}
        </li>
        {selectGroup.cities.map(city => (
          <li key={city.key} onClick={this.handleCityClick(city)}>
            <div className={css.listWrapper}>{city.name}</div>
          </li>
        ))}
      </ul>
    ))}
  </div>
</CSSTransitionGroup>
)}
</React.Fragment>

Это мой CSS для переходных состояний 

.hide {
  opacity: 0;
}

.fromHideToShow {
  opacity: 1;
}

.show {
  opacity: 1;
}

.fromShowToHide {
  opacity: 0;
}

Ничего не происходит, как при отсутствии переходавообще .. и я не уверен, что я делаю не так

...