jquery 如何在React.js中循环和呈现元素，而不需要Map对象数组？

drnojrws 于 2023-02-21 发布在 jQuery

关注(0)|答案(6)|浏览(175)

我尝试将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"
    ...
  );
}

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

jquery

来源：https://stackoverflow.com/questions/29149169/how-to-loop-and-render-elements-in-react-js-without-an-array-of-objects-to-map

6条答案

按热度按时间

bkkx9g8r1#

更新：截至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和花哨的es6

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

此外，还必须将返回值 Package 在容器中。
正如文档中所说的here
目前，在组件的呈现中，只能返回一个节点;比如说，如果要返回div列表，则必须将组件 Package 在div、span或任何其他组件中。

赞(0）回复(0）举报 2023-02-21

cwdobuhd2#

以下是包含一些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;

赞(0）回复(0）举报 2023-02-21

agxfikkp3#

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

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

赞(0）回复(0）举报 2023-02-21

fdbelqdn4#

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

赞(0）回复(0）举报 2023-02-21

ctrmrzij5#

如果您 * 负担得起 * 创建一个临时数组，您仍然可以使用map：

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

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

赞(0）回复(0）举报 2023-02-21

ahy6op9u6#

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

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

赞(0）回复(0）举报 2023-02-21

我来回答

jquery 如何在React.js中循环和呈现元素，而不需要Map对象数组？

6条答案

相关问题

热门标签

最新问答