javascript - 如何在 React 中建模列表

Question

我想呈现此 HTML:

<div className="panel panel-default">
  <div className="panel-body">
    <dl className="dl-horizontal">
      <dt>Step 1</dt>
      <dd>
        <samp>Output 2</samp><br>
        <samp>Output 2</samp>
      </dd>
      <dt>Step 1</dt>
      <dd>
        <samp>Output 2</samp><br>
        <samp>Output 2</samp>
      </dd>
    </dl>
  </div>
</div>

在 React 中对此进行建模的简单方法是:

var ResultBoxPanel = React.createClass({
  render: function () {
    return (
      <div className="panel panel-default">
        <div className="panel-body">
          <dl className="dl-horizontal">
            <ResultBoxStep name="Step 1" />
            <ResultBoxStep name="Step 2" />
          </dl>
        </div>
      </div>
    );
  }
});

var ResultBoxStep = React.createClass({
  render: function () {
    return (
      <dt>{this.props.name}</dt>
      <dd>
        <samp>Output 1</samp><br />
        <samp>Output 2</samp>
      </dd>
    );
  }
});

这不起作用，因为显然我 cannot return multiple siblings来自 render 函数。

那么，我该如何对此进行建模呢？

Answer 1

根据规范，不允许在 dl 树中使用 span，但根据 React 肯定是允许的。

但是，为了遵守 HTML 规范，这就是您应该如何建模的方式。

<ResultBoxDT title={"Step 1"}/>
<ResultBoxDD name='Step 1 dd'/>
<ResultBoxDT title="Step 2" />
<ResultBoxDD name='Step 2 dd'/> 

为了使其更加动态，这将是您生成多个部分的方式，这也应该让您明白您不需要将每个标签提取到其自己的组件中。

{
    list.map(function(item) {
        var title = 'Step ' + item;
        var name = 'Step ' + item + ' dd';
        return [
            <ResultBoxDT title={title}/>,
            <ResultBoxDD name={name} />
        ]
    })
}