Javascript 如何在React中为列表建模

我要呈现此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>

第一步
输出2

产出2
第一步
输出2

产出2

在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>
    );
  }
});

var ResultBoxPanel=React.createClass({
渲染：函数（）{
返回(
);
}
});
var ResultBoxStep=React.createClass({
渲染：函数（）{
返回(
{this.props.name}
输出1

产出2
);
}
});

这不起作用，因为我显然是从

render

函数调用的

---

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

根据规范，在

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} />
        ]
    })
} 

{
列表.映射（功能（项）{
变量标题='步骤'+项目；
变量名称='Step'+项目+'dd'；
返回[
,
]
})
} 

最简单的方法是用

span

标签包装

dt

和

dd

，然后用它完成。