时间戳

首页 > 解决方案 > 如何在不重新加载的情况下动态添加 React 组件？

javascript - 如何在不重新加载的情况下动态添加 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组件播放器时间的方法，这样如果发生刷新，我可以在组件发生时将该数据向下传递给组件被刷新，因此他们可以从他们离开的地方开始播放。

所以我的问题是，有没有一种方法可以动态生成这些组件而无需刷新所有现有组件？

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

编辑

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

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

查看此链接以了解我所遇到的情况：视频应用程序。在输入框中，只需添加一个以'，'分隔的视频ID。

标签： javascriptreactjsyoutube-iframe-api

解决方案

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

这是一个链接可能会帮助您在此处输入链接描述

推荐阅读