วิธีการวนซ้ำและแสดงองค์ประกอบใน React.js โดยไม่ต้องอาร์เรย์ของวัตถุที่จะทำแผนที่?

ฉันพยายามแปลงองค์ประกอบ jQuery เป็น React.js และสิ่งหนึ่งที่ฉันมีปัญหาคือการแสดงองค์ประกอบจำนวน n ตามการวนรอบ

mapผมเข้าใจในเรื่องนี้เป็นไปไม่ได้หรือแนะนำและว่าที่อาร์เรย์ที่มีอยู่ในรูปแบบมันทำให้รู้สึกที่สมบูรณ์ในการใช้งาน ไม่เป็นไร แต่ถ้าคุณไม่มีอาเรย์ล่ะ? แต่คุณมีค่าตัวเลขซึ่งเท่ากับจำนวนองค์ประกอบที่กำหนดที่จะแสดงดังนั้นคุณควรทำอย่างไร

นี่คือตัวอย่างของฉันฉันต้องการนำหน้าองค์ประกอบที่มีแท็ก span จำนวนเท่าใดก็ได้ตามระดับของลำดับชั้น ดังนั้นที่ระดับ 3 ฉันต้องการแท็ก 3 ส่วนต่อหน้าองค์ประกอบข้อความ

ในจาวาสคริปต์:

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

แน่นอนว่านี่จะไม่ใช่วิธีที่ดีที่สุดหรือเป็นวิธีเดียวที่จะบรรลุเป้าหมายนี้ ฉันพลาดอะไรไป

อัปเดต: ตั้งแต่วันที่ทำปฏิกิริยา> 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 ในตัวอย่างด้านบน

ตามที่เอกสารบอกไว้ที่นี่

ขณะนี้ในการแสดงผลของส่วนประกอบคุณสามารถส่งคืนได้เพียงหนึ่งโหนดเท่านั้น หากคุณมีพูดรายการ divs ที่จะส่งคืนคุณต้องล้อมรอบส่วนประกอบของคุณภายใน 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;

ฉันใช้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>
    );
}

Array.from()ใช้วัตถุ iterable เพื่อแปลงเป็นอาร์เรย์และฟังก์ชั่นแผนที่เสริม คุณสามารถสร้างวัตถุที่มี.lengthคุณสมบัติดังนี้

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

ฉันคิดว่านี่เป็นวิธีที่ง่ายที่สุดในการวนซ้ำ js

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