Reactjs 将组件与子组件反应，或在父级中呈现HTML？

我有一个关于反应模式的问题。渲染组件时，该组件是否适合渲染多个子组件，或者是否可以在父组件中渲染一些HTML。例如：

如果我有一个包含标题和包含元素列表的正文的框，我应该：

var Box = React.createClass({
  render: function() {
    <div className="box">
      <HeadingBox />
      <BodyBox />
    </div>
  }
});

var-Box=React.createClass({
render:function（）{
}
});

还是可以这样做：

var Box = React.createClass({
  render: function() {
    <div className="box">
      <div className="heading">
        <div> Heading1 </div>
        <div> Heading2 </div>
      </div>
      <BodyBox />
    </div>
  }
});

var-Box=React.createClass({
render:function（）{
标题1
标题2
}
});

---

这里有什么规则吗？

这取决于上下文

一般的做法是，如果您想在任何地方重用标记，就应该使用单独的组件，这样就不必重复自己的操作。此外，如果您发现自己编写了很大一部分HTML（例如，超过50行），将其拆分为子组件也会有所帮助

在其他情况下，只需使用普通HTML即可

您可以找到关于如何最好地组织React代码的良好描述。（将UI细节与交互逻辑分离的部分）

---

React与其他编程框架没有什么不同——它最适合DRY（不要重复自己）。

不，没有规则。它很灵活，因此您可以做出最适合您需要的选择。：）