Question

我正在构建一个应用程序，我需要使用React来渲染Bootstrap网格。我是React newb所以请耐心等待。

前端将收到需要在Boostrap列中显示的N个对象，每个对象都在他自己的列中。问题是，我不知道N有多大，所以我不知道需要多少行。

任何想法如何解决这个问题？

我应该只有一个组件吗？或者三个（容器，行，列）？或其他什么？

Answer 1

首先，考虑一下您是否需要Container，Row和Column的自定义组件。你可以使用具有适当的css类的div，但是我没有看到将它包装到自定义组件中的重要价值。如果您决定使用自定义组件，您可能需要查看react-bootstrap，他们已经实现了这些。

至于布局，我相信你可以在Bootstrap布局中连续放置任意数量的列，并且它们将根据需要进行包装（如果超过12个），所以它可能是最简单的有一行并将所有列放在其中（参见Bootstrap docs）。

Answer 2

根据您尝试插入网格的内容类型，有多种方法可以解决此问题。

首先，就列而言，Bootstrap使用12列网格系统。这将使您的生活更轻松，因为您可以将12除以每行中的元素数量。如果你的html设置正确，你可以使用：

var numOfElements = document.getElementById('objectsWrapper').children.length;

如果你正在使用图片，你可能需要设置严格的最大高度和最大宽度（百分比）来限制生成的图像搞乱网格。

接下来，当列超过12个元素时，如果需要，您将要开始新的 .row 。创建一个新div，将其附加到当前容器并将其设置为您要将孩子添加到的currentDiv。此步骤非常重要，因为您的代码需要知道哪些对象包装＆＃39;它要求孩子们。

洗涤。冲洗。重复。

希望这会有所帮助。