web-dev-qa-db-ja.com

マップするオブジェクトの配列なしでReact.jsの要素をループしてレンダリングする方法

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

確かにこれは最善ではない、またはこれを達成するための唯一の方法はありませんか？何が足りないの？

javascriptjqueryreactjsreact-jsx
126
Jonathan Miles

更新：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;

OR

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

ここではJSXの子について説明しているドキュメント

古い：

代わりに1つのループを使うことができます

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を使用しました

ドキュメントが言うように ここ

現在、コンポーネントのレンダリングでは、1つのノードしか返すことができません。たとえば、返すdivのリストがある場合は、コンポーネントをdiv、span、またはその他のコンポーネントにラップする必要があります。

222
Dhiraj

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;
48
Dmytro Medvid

レンダリングでループするために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>
    );
}
18
Mathdoy

Array.from() は、配列とオプションのマップ関数に変換するための反復可能オブジェクトを取ります。次のように.lengthプロパティを使ってオブジェクトを作成できます。

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

これがreact jsをループする最も簡単な方法だと思います

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