如何在不重新加载的情况下动态添加 React 组件？

Question

上下文

React 新手；我有一个父组件，它使用 react-youtube 组件生成 1-6 个 youtube 视频。这个想法是 YouTube 组件将根据数组中的 youtube 视频 ID 动态生成。目前，我正在生成像

这样的组件

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

就生成组件而言，它按预期工作。但是，问题是，当 this.state.videoIds 更新时，它会导致所有 YouTube 组件被刷新。这种行为对我来说很有意义。

问题

我遇到的问题如下：如果功能保持不变，我需要一种方法来跟踪每个 YouTube 组件的播放时间，以便在发生刷新时，我可以刷新时将该数据传回组件，以便它们能够从停止的地方播放。

所以我的问题是，有没有办法动态生成这些组件而不需要刷新所有现有组件？

考虑到它的价值，我考虑过只拥有一个父组件，它将为每个用例静态添加组件，但这看起来非常笨拙，我真的不想走那条路。

编辑

这感觉很相关，我根据在任何给定时间加载的玩家数量平均分配屏幕 space，代码如下所示：

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 的评论后，我突然想到 'reload' 来自调整大小。我想这是有道理的。必须有更好的方法来做到这一点？

编辑 1

看看这个 link 看看我遇到了什么：Video App。在输入框中，只需添加一个由“,”分隔的视频 ID。

Answer 1

此代码可能会帮助您从用户离开的任何地方开始播放视频。问题是我们需要在用户离开的任何地方维护或存储视频的最后播放状态，有些地方在重新加载时永久不可擦除，因此这里使用 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;
}

这里有一个link可能对你有帮助enter link description here

Answer 2

在更多地使用 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 来完成，但我还没有想出解决方案。我希望这可以帮助其他人。

如何在不重新加载的情况下动态添加 React 组件？

How to add React components dynamically without reload?

javascript

reactjs

youtube-iframe-api

上下文

问题

编辑

编辑 1