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

如何在 React 中建模列表

How to model a list in React

javascript

html

reactjs

react-jsx