如何在没有要映射的对象数组的情况下在 React.js 中循环和渲染元素？

小编典典

如何在没有要映射的对象数组的情况下在 React.js 中循环和渲染元素？

all

我正在尝试将 jQuery 组件转换为 React.js，而我遇到的困难之一是基于 for 循环渲染 n 个元素。

我知道这是不可能的，或者是推荐的，并且模型中存在数组的地方使用map.
这很好，但是当你没有数组时怎么办？相反，你有一个数值，它等于要渲染的给定数量的元素，那么你应该怎么做？

这是我的示例，我想根据元素的层次级别为元素添加任意数量的 span 标签。所以在第 3 级，我想要在文本元素之前有 3 个跨度标签。

在 JavaScript 中：

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

我似乎无法得到这个，或者任何类似于在 JSX React.js 组件中工作的东西。相反，我必须执行以下操作，首先将临时数组构建为正确的长度，然后循环该数组。

反应.js

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

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

当然这不可能是最好的，或者是实现这一目标的唯一方法？我错过了什么？

阅读 80

2022-08-21

共1个答案

小编典典

更新：截至 React > 0.16

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

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

或者

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

此处的文档解释了 JSX 子级

老的：

您可以改用一个循环

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

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

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

正如文档所说here

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

2022-08-21