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

LEYTom2020-03-11

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

我知道这是不可能的，也不建议这样做，并且在模型中存在数组的地方使用它完全有意义map。很好，但是当您没有数组时该怎么办？取而代之的是，您拥有一个等于要渲染的给定元素数量的数值，那么您应该怎么做？

这是我的示例，我想根据元素的层次结构级别为元素添加任意数量的span标签。因此，在第3级，我要在text元素之前添加3个span标签。

在javascript中：

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

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

React.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"
    ...
  );
}

当然，这不是最好的方法还是唯一的方法？我想念什么？

AEva伽罗2020/03/11 15:00:53

我正在Object.keys(chars).map(...)循环渲染

// chars = {a:true, b:false, ..., z:false}

render() {
    return (
       <div>
        {chars && Object.keys(chars).map(function(char, idx) {
            return <span key={idx}>{char}</span>;
        }.bind(this))}
        "Some text value"
       </div>
    );
}

理查德十三2020/03/11 15:00:53

我认为这是在React js中循环的最简单方法

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>

前端JinJin2020/03/11 15:00:53

Array.from()接受一个可迭代的对象以转换为数组和可选的map函数。您可以使用以下.length属性创建一个对象：

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer