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

Posted 2023-02-21

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

【英文标题】：How to loop and render elements in React.js without an array of objects to map?

【发布时间】：2015-05-22 20:06:10

【问题描述】：

我正在尝试将 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 组件中工作的东西。相反，我必须执行以下操作，首先构建一个长度正确的临时数组，然后循环该数组。

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

这肯定不是最好的，还是唯一的方法？我错过了什么？

【问题讨论】：

facebook.github.io/react/docs/…

你也可以这样做：jsfiddle.net/crl/69z2wepo/19804

【参考方案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>
));

Docs here explaining about JSX children

---

旧：

你可以使用一个循环来代替

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 或任何其他组件中。

【讨论】：

这行得通，而且更简单，谢谢。是的，我知道您必须将返回值包装在容器中，我已经这样做了，只是示例中缺少它。

在循环内添加键。键在反应中很重要。

我一直在寻找你

@ElgsQianChen 不可能。它必须用一些标签包装。如果 indents 返回一个带有内容的 dom 元素，那么它就可以了

我不明白为什么这个答案中提到了 map 方法，因为它只适用于 Array 对象，问题明确指出并非如此。

【参考方案2】：

这里有一些 ES6 特性的更实用的示例：

'use strict';

const React = require('react');

function renderArticles(articles) 
    if (articles.length > 0)       
        return articles.map((article, index) => (
            <Article key=index article=article />
        ));
    
    else return [];


const Article = (article) => 
    return ( 
        <article key=article.id>
            <a href=article.link>article.title</a>
            <p>article.description</p>
        </article>
    );
;

const Articles = React.createClass(
    render() 
        const articles = renderArticles(this.props.articles);

        return (
            <section>
                 articles 
            </section>
        );
    
);

module.exports = Articles;

【讨论】：

这看起来是最“反应灵敏”的方式。将值作为道具传递给另一个子组件。谢谢！

这太棒了！非常适合当你的 render() 是 html 很重的时候。

要使其更符合 ES6 标准，您可以使用 import React from "react" 和 export default Articles

这个答案甚至没有尝试回答这个问题。问题很明确，如何将 for loop 转换为可映射数组（或对象），以便在 React 组件中呈现 n 个项目而无需项目数组。您的解决方案完全忽略了这一事实，并假设从道具传递了一系列文章。

这个问题非常具体，关于没有对象数组。

【参考方案3】：

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

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

【讨论】：

正是我渲染 X 个元素所需要的，谢谢！

【参考方案4】：

我正在使用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>
    );

【讨论】：

您的答案对我有用，但只有在我在函数末尾添加 chars && ... 和 .bind(this) 之后。我很好奇为什么仅仅Object...（等等）不起作用。我一直不确定。

这没有回答问题，它明确表示没有要解析的对象数组，并且解释明确表示我想将 for 循环转换为映射以在 React 组件中呈现。您将数组替换为无助于回答问题的对象，或添加任何其他值。

【参考方案5】：

如果您可以负担，您仍然可以使用map 来创建临时数组：

    new Array(this.props.level).fill(0).map((_, index) => (
        <span className='indent' key=index></span>
    ))

之所以有效，是因为new Array(n).fill(x) 创建了一个大小为n 的数组，其中填充了x，然后可以帮助map。

【参考方案6】：

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

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

【讨论】：

这没有回答问题，请在尝试回答之前完整阅读问题。

它帮助了我并节省了我的时间。