매핑할 객체 배열 없이 React.js에서 요소를 루프하고 렌더링하려면 어떻게 해야 합니까?

매핑할 객체 배열 없이 React.js에서 요소를 루프하고 렌더링하려면 어떻게 해야 합니까?

jQuery 컴포넌트를 React.js로 변환하려고 하는데 문제가 있는 것 중 하나가 for 루프를 기반으로 한n개의 요소를 렌더링하는 것입니다.

이것이 불가능하거나 권장되지 않으며 모델에 어레이가 있는 경우 사용하는 것이 매우 타당하다는 것을 알고 있습니다.map좋습니다만, 어레이가 없는 경우는 어떻게 됩니까?렌더링할 요소 수에 해당하는 숫자 값이 있는 대신 어떻게 해야 합니까?

다음 예제에서는 요소의 계층 수준에 따라 임의 개수의 스팬 태그를 요소의 앞에 붙입니다.레벨 3에서는 텍스트 요소 앞에 3개의 스판 태그를 붙입니다.

javascript:

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

JSX React.js 컴포넌트에서의 동작이나 이와 유사한 동작은 이해할 수 없습니다.대신 다음 작업을 수행해야 했습니다. 먼저 올바른 길이로 temp 어레이를 구축한 후 어레이를 루프합니다.

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

확실히 이것이 이것을 달성하기 위한 최선의 방법 혹은 유일한 방법은 아닐까요?제가 무엇을 빠뜨리고 있나요?

갱신일 :리액트 기준 > 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>
));

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 또는 기타 컴포넌트로 랩해야 합니다.

다음으로 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;

Array.from() 는 배열로 변환하기 위한 반복 가능한 개체와 옵션 맵 함수를 사용합니다.다음 명령어를 사용하여 개체를 만들 수 있습니다..length다음과 같이 속성을 설정합니다.

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

사용하고 있다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>
    );
}

아직 사용할 수 있습니다.map임시 어레이를 작성할 수 있는 경우:

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

이것은, 다음과 같은 이유로 동작합니다.new Array(n).fill(x)크기의 배열을 만듭니다.n로 가득 찬.x그 후, 이 기능을 통해map.

리액트 js를 루프하는 가장 쉬운 방법이라고 생각합니다.

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

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