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

Question

使用Materialize css框架和ReactJs渲染网格的最佳方法是什么？

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

<div class="row">
    <div class="col s6"></div>
    <div class="col s6"></div>
</div

我如何告诉ReactJs我想在第二个col s6元素中渲染？因为如果我做ReactDom.Render(</Element>, document.getElementById("col s6"))，它可能会采取第一个？

如果我想渲染两个元素怎么办？我在这里错过了什么？

Answer 1

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

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

现在考虑只有你显示的HTML containers将是一个HTMLCollection与两个元素。然后可以按如下方式使用ReactJs：

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

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

<!-- 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))