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

Question

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

我理解这是不可能的,或者推荐,并且如果模型中存在数组,则使用它是完全合理的map.那很好,但是当你没有阵列时呢？相反,你有数值等于要渲染的给定数量的元素,那么你应该怎么做？

这是我的例子,我想根据它的层次级别为一个元素添加任意数量的span标记.所以在第3级,我想在文本元素之前使用3个span标签.

在javascript中:

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

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

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

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

Answer 1

更新:自React> 0.16起

Render方法不一定必须返回单个元素.也可以返回一个数组.

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和fancy es6

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

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

正如文档在这里所说的那样

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

Answer 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;

Answer 3

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

Answer 4

Array.from()采用可迭代对象转换为数组和可选的映射函数.您可以使用以下.length属性创建对象:

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

Answer 5

map如果您有能力创建临时数组，您仍然可以使用：

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

这是有效的，因为创建了一个填充了new Array(n).fill(x)大小的数组，然后可以提供帮助。nxmap