更新时间：自React> 0.16

渲染方法不一定要返回单个元素。也可以返回一个数组。

Render method does not necessarily have to return a single element. An array can also be returned.

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return indents;

OR

return this.props.level.map((item, index) => (
    <span className="indent" key={index}>
        {index}
    </span>
));

这里的文档解释有关JSX儿童的信息

OLD：

您可以使用一个循环

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

您还可以使用 .map 和花式es6

You can also use .map and fancy es6

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className='indent' key={index} />
    ))}
    "Some text value"
   </div>
);

此外，您必须将返回值包装在容器中。我在上面的例子中使用了div

Also, you have to wrap the return value in a container. I used div in the above example

正如文档所说这里

目前，在组件的渲染中，你只能返回一个节点;如果你有一个要返回的div列表，你必须将你的组件包装在div，span或任何其他组件中。

Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.