Как динамически добавлять компоненты React без перезагрузки?

Question

Контекст

Новее реагировать;У меня есть родительский компонент, который генерирует от 1 до 6 видео YouTube, используя компонентыact-YouTube.Идея состоит в том, что компоненты YouTube будут генерироваться динамически на основе идентификаторов видео YouTube в массиве.В настоящее время я генерирую такие компоненты, как

{this.state.videoIds.map((videoId, index) =>
                    <YouTube
                        key={index}
                        opts={opts}
                        videoId={videoId}
                        onReady={this._onReady} />
                )}

. Что касается генерации компонентов, то все работает как положено.Однако проблема в том, что при обновлении this.state.videoIds все компоненты YouTube обновляются.Такое поведение имеет смысл для меня.

Проблема

Проблема, с которой я столкнулся, заключается в следующем: если функциональность остается прежней, мне нужен способ, чтобы иметь возможность отслеживать каждый из YouTubeвремя проигрывания компонентов, поэтому, если произойдет обновление, я смогу передать эти данные обратно компонентам при обновлении, чтобы они могли воспроизводиться с того места, на котором они остановились.

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

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

Edit

Это кажется уместным, я делю пространство экрана равномерно в зависимости от того, сколько игроков загруженов любой момент времени код выглядит следующим образом:

calculateVideoWidth = () => {
        if (this.state.videoIds.length <= 3) {
            return (document.body.clientWidth - 15) / this.state.videoIds.length;
        } else {
            return (document.body.clientWidth - 15) / this.MAX_NUMBER_OF_COLUMNS;
        }
    };

    calculateVideoHeight = () => {
        if (this.state.videoIds.length <= 3) {
            return window.innerHeight - 4;
        } else {
            return (window.innerHeight - 4) / this.MAX_NUMBER_OF_ROWS;
        }
    };

В моем методе рендеринга я делаю следующее:

let opts = {
            height: this.calculateVideoHeight(),
            width: this.calculateVideoWidth()
        };

Послеглядя на комментарий @ Tholle, мне пришло в голову, что «перезагрузка» происходит от изменения размера.Что, я думаю, имеет смысл.Должен быть лучший способ сделать это?

Редактировать 1

Проверьте эту ссылку, чтобы увидеть, что я испытываю: Видео приложение .В поле ввода просто добавьте идентификатор видео, разделенный символом «,».

Answer 1

Поработав с flexbox, я смог решить эту проблему.Я получил следующее:

html, body, #root, #root > div, div.container, iframe {
    width: 100%;
    height: 100%;
    margin: 0;
}

div.container {
    display: flex;
    flex-wrap: wrap;
}

span {
    flex-basis: 33%;
    flex-grow: 1;
}

Для справки, вот мой jsx

        <div>
            <div className="container">
                {this.state.videoIds.map((videoId, index) =>
                    <YouTube
                        id="flex-item"
                        key={index}
                        videoId={videoId}
                        onStateChange={this._onStateChange}
                        onReady={this._onReady}/>
                )}
            </div>
        </div>

Я подумал, что это можно сделать с помощью flexbox, но я не придумалрешения для этого пока нет.Я надеюсь, что это поможет кому-то еще.

Answer 2

Этот код может помочь вам начать видео с того места, куда ушел пользователь.Дело в том, что нам нужно поддерживать или сохранять последнее состояние воспроизведения видео, где бы пользователь ни оставался, а некоторые - там, где они не стираются при перезагрузке, поэтому здесь реализовано использование localStorage.

import React from "react";
import ReactDOM from "react-dom";
import YouTube from "react-`enter code here`youtube";

class App extends React.Component {
  state = {
    videoIds: ["2g811Eo7K8U"],
    videosPlayState: {}
  };

  componentDidMount() {
    let videosPlayState = localStorage.getItem("videosPlayState") || "{}";
    this.setState({
      videosPlayState: JSON.parse(videosPlayState)
    });
  }

  addVideo = () => {
    this.setState(prevState => ({
      videoIds: [...prevState.videoIds, "9kBACkguBR0"]
    }));
  };

  _onStateChange = (event, videoId) => {
    let newPlayState = { ...this.state.videosPlayState
    };
    newPlayState[videoId] = event.target.getCurrentTime();
    localStorage.setItem("videosPlayState", JSON.stringify(newPlayState));
  };

  _onReady(event, videoId) {
    event.target.seekTo(this.state.videosPlayState[videoId] || 0);
  }
  render() {
    const opts = {
      height: "200",
      width: "400",
      playerVars: {
        autoplay: 1
      }
    };
    return ( <
      div className = "App" >
      <
      div className = "video-container" > {
        this.state.videoIds.map((videoId, index) => ( <
          YouTube onStateChange = {
            event => {
              this._onStateChange(event, videoId);
            }
          }
          onReady = {
            event => {
              this._onReady(event, videoId);
            }
          }
          key = {
            index
          }
          videoId = {
            videoId
          }
          opts = {
            opts
          }
          className = {
            "item"
          }
          />
        ))
      } <
      /div> <
      div >
      <
      button onClick = {
        this.addVideo
      } > Add video < /button> <
      /div> <
      /div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);

. Вот css:

.video-container .item {
  padding: 25px;
  display: inline-block;
}
.video-container {
  display: flex;
  flex-wrap: wrap;
}

вот ссылка может вам помочь введите описание ссылки здесь