如何使用ReactJs和Materialize渲染网格？

Question

使用header()框架和Materialize css呈现网格的最佳方法是什么？

我是否为index.html创建了一个骨架，然后在那里渲染？例如：

ReactJs

我如何告诉ReactJs我想要在第二个<div class="row"> <div class="col s6"></div> <div class="col s6"></div> </div 元素中呈现？ 因为如果我col s6，它可能会占用第一个？

如果我想渲染两个元素怎么办？我在这里缺少什么？

Answer 1

永远不要使用ReactJs，但您目前正在尝试通过id获取没有id的元素。您可以使用方法选择这两个元素：

var containers = document.getElementsByClassName("col s6");

现在只考虑您显示的HTML containers将是getElementsByClassName，其中包含两个元素。然后可以按如下方式使用ReactJ：

ReactDom.Render(</Element>, containers[0])
ReactDom.Render(</Element>, containers[1])

另一种选择是将id属性添加到div，以便继续使用HTMLCollection方法：

<!-- HTML -->
<div class="row">
    <div id="col1" class="col s6"></div>
    <div id="col2" class="col s6"></div>
</div

/* JavaScript */
ReactDom.Render(</Element>, document.getElementById("col1"))
ReactDom.Render(</Element>, document.getElementById("col2))