我正在构建一个应用程序，我需要在其中使用 React 来呈现 Bootstrap 网格。我是 React 新手，所以请多多包涵。
前端将接收 N 个需要在 Boostrap 列中显示的对象，每个对象都在自己的列中。问题是，我不知道 N 有多大，所以我不知道我需要多少行。
任何想法如何解决这个问题？
我应该只有一个组件吗？还是三个（容器、行、列）？还是别的什么？
【问题讨论】：
标签： javascript twitter-bootstrap reactjs
首先，考虑您是否甚至需要自定义容器、行和列组件。您可以只使用带有适当 css 类的 div，我认为将其包装到自定义组件中没有多大价值。如果您决定使用自定义组件，您可能需要查看react-bootstrap，他们已经实现了这些。
至于布局，我相信您可以在 Bootstrap 布局中的一行中放置任意数量的列，并且它们会根据需要进行换行（如果超过 12 个），因此最简单的方法可能是只有一行将所有列放入其中（参见Bootstrap docs）。
【讨论】：
根据您尝试插入网格的内容类型，有不同的方法可以解决此问题。
首先，就列而言，Bootstrap 使用 12 列网格系统。这将使您的生活更轻松，因为您可以将 12 除以每行中的元素数。如果您的 html 设置正确，您可以使用：
var numOfElements = document.getElementById('objectsWrapper').children.length;
如果您使用图像，您可能需要设置严格的 max-height 和 max-width（百分比）来限制生成的图像不会弄乱网格.
接下来，当列超过 12 个元素时，如有必要，您需要开始一个新的 .row。创建一个新的 div，将其附加到您当前的容器中，并将其设置为您想要添加您的孩子的 currentDiv。这一步很重要，因为您的代码需要知道它正在为孩子查询哪个“objectsWrapper”。
洗。冲洗。重复。
希望这会有所帮助。
【讨论】：