Question

我对React模式有疑问。渲染组件时，此组件是否适合渲染多个子组件，或者是否可以在父组件中呈现某些HTML。例如：

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

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

或者可以这样做：

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

这里有任何规则吗？

Answer 1

这完全取决于背景。

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

在其他情况下，只需使用纯HTML即可。

您可以找到有关如何最好地整理React代码here的详细说明。（部分UI细节与交互逻辑分离）

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

使用子组件反应组件或在父组件中呈现HTML？

1 个答案: