Question

我有一个反应组件，它映射一些数据并显示产品行。我制作了一个映射函数，它还根据屏幕大小预先整理数据，因此所有内容都适合一行，并且浮动和产品的大小略有不同，没有奇怪的行为。这就是我现在所拥有的：

renderProducts() {
    if (this.props.display && this.props.display.productList && this.props.display.productList.hits) {
      const chunkedProducts = chunkProductsForWindow(this.props.display.productList.hits);

      return chunkedProducts.map((row) => (
        <div className="row">
          {
           row.map((product, index) => (
             <div className="col-xs-12 col-sm-6 col-md-3" key={index}>
              <h2>{product.product_name}</h2>
              <i>{product.product_name}</i>
              <p>${product.price}</p>
              <Link to={`/product/${product.product_id}`}>details</Link>
            </div>
           ))
         }
         </div>
      ));
    }
    return null;
  }

块函数看起来像这样：

 function chunkProductsForWindow(products) {
  let chunkSize;
  const windowSize = window.innerWidth;

  if (windowSize >= 992) {
    chunkSize = 4;
  } else if (windowSize < 992 && windowSize >= 768) {
    chunkSize = 2;
  } else {
    chunkSize = 1;
  }

  return _.chunk(products, chunkSize);
}

因此，当页面加载时，这对我来说很好。当你拖动页面时会变得很奇怪，因为当用户改变屏幕大小时，没有任何东西在重新计算块大小。我试图避免在窗口大小上放置一个监听器，所以我想知道的是 - 有更好的方法来做这个包装行会根据屏幕大小改变 - 更简单的更好。

当屏幕尺寸被拖动时，没有调用渲染器，所以我不认为我可以利用生命周期事件。想知道是否有一个更优雅的解决方案，不需要屏幕大小的听众（试图尽可能保持这个应用程序的性能）。谢谢你的阅读！

编辑 - 为清晰起见添加了代码笔 - https://codepen.io/ajmajma/pen/RGmRXE

例如，小窗口启动（如果需要则刷新页面，将初始块大小读为1），然后将其拖动到大尺寸，您将看到产品保留在单行中。

Answer 1

是的，您必须侦听窗口调整大小以触发重新计算并重新渲染。我会把chuckSize作为一个组件状态。但是不要在每个窗口调用setState调整大小回调。而是仅在到达断点时调用setState。并且您可以使窗口调整大小回调限制以提高性能。

编辑由于下面的评论之一，这个答案被接受了。我复制粘贴以避免混淆......

但是在你的情况下你的chunkProductsForWindow函数和bootstrap 网格正在做同样的事情。两者都使它没有响应。您可以删除chunkProductsForWindow并让网格完成其工作。 codepen codepen.io/anon/pen/dpEOoy

反应，响应式bootstrap行和列

1 个答案: