Kā React.js izveidot cilpu un atveidot elementus bez objektu masīva, ko kartēt?

Es'es mēģinu pārvērst jQuery komponents React.js un viena no lietām, es'man ir grūtības ar ir atveidot n skaitu elementu, pamatojoties uz for ciklu.

Es saprotu, ka tas nav iespējams vai nav ieteicams un ka, ja modelī ir masīvs, ir pilnīgi loģiski izmantot map. Tas ir labi, bet ko darīt, ja jums nav masīva? Tā vietā jums ir skaitliska vērtība, kas ir vienāda ar noteiktu elementu skaitu, kas jāatveido, un ko tad jums vajadzētu darīt?

Lūk, mans piemērs, es gribu elementam pievienot prefiksu ar patvaļīgu span tagu skaitu, pamatojoties uz tā hierarhijas līmeni. Tātad 3. līmenī pirms teksta elementa es gribu 3 span tagus.

JavaScript:

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

Man šķiet, ka es nevaru panākt, lai šis vai kāds līdzīgs JSX React.js komponents darbotos. Tā vietā man bija jādara šādi, vispirms izveidojot pagaidu masīvu līdz pareizajam garumam un pēc tam cilpu masīvā.

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

Protams, tas nevar būt labākais vai vienīgais veids, kā to panākt? Ko es palaidu garām?

Dmitry Shvedov
Rediģēts jautājums 30priekšpusdienari5t janvārī 2016 в 10:04
Programmēšana
javascript jquery reactjs react-jsx
19pēcpusdienari3t martā 2015 в 3:49
Pagaidām nav skatījumu
Risinājums

Atjaunināts: No React > 0.16

Render metodei nav obligāti jāatgriež viens elements. Var atdot arī masīvu.

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return indents;

VAI

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

Docs šeit skaidro par JSX bērniem

OLD:

Tā vietā var izmantot vienu cilpu

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>
);

Varat arī izmantot .map un izdomātu es6

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

Turklāt atgrieztā vērtība ir jāietver konteinerā. Iepriekš minētajā piemērā es izmantoju div

Kā teikts dokumentos šeit.

Pašlaik komponenta atveidē var atgriezt tikai vienu mezglu; ja jums ir, piemēram, divs saraksts, kas jāatgriež, jums komponents ir jāievieto div, span vai jebkurā citā komponentā.

Dhiraj
Rediģēta atbilde 28pēcpusdienari2t februārī 2018 в 10:39
Komentāri (9)

Šeit ir funkcionālāks piemērs ar dažām ES6 funkcijām:

'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;
Komentāri (5)

Es izmantoju Object.keys(chars).map(...), lai veiktu cilpu renderēšanu

// 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>
    );
}
Mathdoy
Rediģēta atbilde 20pēcpusdienari2t janvārī 2016 в 7:24
Komentāri (2)