@lexstile

Как сделать reverse DOM элементов в REACT перед перерисовкой?

Есть компонент:
export class Movie extends React.PureComponent<MoviePropsType> {
  render() {
    const { movie, recommended } = this.props;
    const border = recommended ? recommended.rating : '';
    return (
      <div className="movie-card">
        <div className={`movie-card card ${border}`}>
          <img className="card-img-top" src={movie.imageUrl} alt={movie.title} />
          <div className="card-body">
            <h4 className="card-title">{movie.title}</h4>
            <h6 className="card-subtitle mb-2 text-muted">{movie.subtitle}</h6>
            <p className="text-justify movie-descr">{movie.description}</p>
          </div>
          <div className="card-footer">
            <div className="clearfix">
              <div className="float-left mt-1">
                <StarRating rating={movie.rating} />
              </div>
              <div className="card-footer-badge float-right badge badge-primary badge-pill">{movie.rating}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Нужно заменить порядок прямых потомков внутри:
<div className={`movie-card card ${border}`}></div>

То есть, должно получиться так:
<div className="card-footer">
            <div className="clearfix">
              <div className="float-left mt-1">
                <StarRating rating={movie.rating} />
              </div>
              <div className="card-footer-badge float-right badge badge-primary badge-pill">{movie.rating}</div>
            </div>
          </div>
          <div className="card-body">
            <h4 className="card-title">{movie.title}</h4>
            <h6 className="card-subtitle mb-2 text-muted">{movie.subtitle}</h6>
            <p className="text-justify movie-descr">{movie.description}</p>
          </div>
          <img className="card-img-top" src={movie.imageUrl} alt={movie.title} />
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
0xD34F
@0xD34F
Добавьте свойство, которое будет отвечать за порядок элементов и переключайте его значение. Или, если важен только внешний вид, а не реально расположение элементов, задайте родителю display: flex и вешайте ему класс, который будет переопределять order у дочерних элементов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Enapter Санкт-Петербург
от 180 000 до 240 000 руб.
АгроМон Москва
от 120 000 до 160 000 руб.
21 авг. 2019, в 13:40
25000 руб./за проект
21 авг. 2019, в 13:15
500 руб./за проект