如何在React.js中循环和呈现元素,而不需要映射对象数组?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (29)

我试图将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组件中的工作。相反,我必须执行以下操作,首先将临时数组构建为正确的长度,然后循环数组。

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

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

提问于
用户回答回答于

可以改用一个循环

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

正如文档在这里所说的

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

用户回答回答于

下面是带有一些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;

扫码关注云+社区

领取腾讯云代金券