Question

我正在开展一个项目，该项目需要在主视频显示旁边显示一系列喜欢的视频（类似于YouTube的相关视频列表）。但是，在较小的屏幕尺寸上，我需要在视频和其他几个元素下面呈现列表。目前，我的解决方案是将列表放在两个位置，并根据屏幕大小显示/隐藏变量：

    function determinePageSize() {
  if (window.innerWidth > 600) {
    return {
      largeOnlyContainer: "container",
      size: "desktop"
    };
  } else {
    return { size: "mobile", hideOnMiblie: "hide" };
  }
}

然后是我要呈现的内容：

<div style={{ position: "relative" }} class={`${responsiveVariables.hideOnMobile} container`}>
              <div style={{ position: "absolute", left: "-20rem", width: "20rem" }} class={`${this.props.favoriteGifs.length > 0 ? "show" : "hide"} collection`}>
                <a style={{ cursor: "pointer" }} onClick={this.handleHideFavorites} class="collection-item">
                  <span class="deep-purple-text text-darken-1">
                    Favorites
                  </span>

                  <span class="secondary-content" onmouseover="">
                    <i class="deep-purple-text text-darken-1 material-icons">
                      arrow_drop_down
                    </i>
                  </span>
                </a>
                <div
                  className={
                    this.state.collectionVisibility ? "show" : "hide"
                  }
                >
                  {createCollection(
                    this.props,
                    this.props.deleteGif.bind(this, this.props.favoriteGifs)
                  )}
                </div>
              </div>
            </div>

通过将此代码放在两个位置并使用show / hide它可以工作，但是，我想知道是否有更好的方法或是否存在我应该注意的性能问题。＆＃34; createCollection＆＃34;函数从redux商店获取喜欢的视频，然后创建列表组件数组。是否值得传递一个参数，因此它只能在一个地方调用，或者可能创建一个函数来负责创建上面div中包含的所有内容，并且只根据作为参数传入的屏幕大小运行一次。其中一种方法是否有效或者我应该尝试使用CSS和媒体查询来找到解决方案吗？

Answer 1

如果您确保createCollection仅被调用一次并且视频列表的大小合适（不是1000+），您的方法应该会有效。
真正的问题是关于determinePageSize。我期望更多的功能取决于窗口大小，如果你习惯以类似的方式解决所有这些功能而不是它的确定但是如果有更多的开发人员在同一个项目上工作，那么最好坚持使用媒体查询等标准解决方案来缓解认知负荷（我希望任何体面的开发人员都熟悉媒体查询，但要了解{{1} }意味着他们必须理解size: "mobile"。

Answer 2

我想我会补充一点，我的初步解决方案是在不同的地方有两个功能来检查屏幕大小以确定它们是否应该被执行：

{createFavoritesList(
            this.props,
            this.handleHideFavorites.bind(this),
            this.props.deleteGif.bind(this, this.props.favoriteGifs),
            this.state.collectionVisibility
          )}

{createFavoritesListMobile(this.props, this.handleHideFavorites.bind(this), this.props.deleteGif.bind(this, this.props.favoriteGifs), this.state.collectionVisibility)}

然而，这是有效的，因为页面大小仅设置在生命周期事件上，如果某人有一个大屏幕，然后将其更改为仅占据监视器的一半，则列表将被推离屏幕直到该页面被刷新了。虽然我试图用香草媒体查询来解决这个问题，但是在我安装反应敏感的工作之前，我无法按照我想要的方式工作。这使我能够将函数包装在可在断点处自动更改的组件中。

使用show / hide来重新排序带有materliaze + react的div的错误想法？

2 个答案: