Jak mogę renderować powtarzające się elementy Reacta?

Napisałem kod do renderowania powtarzających się elementów w ReactJS, ale nienawidzę tego, jak jest brzydki.

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
}
Czy jest lepszy sposób, aby to osiągnąć?

(chciałbym umieścić pętle for w kodzie szablonu, lub podobne podejście.)

Author: isherwood, 2014-09-03
Source

5 answers

Możesz umieścić wyrażenia wewnątrz szelek. Zauważ w skompilowanym JavaScript, dlaczego pętla for nigdy nie byłaby możliwa wewnątrz składni JSX; JSX jest sumą wywołań funkcji i sugared argumentów funkcji. Dozwolone są tylko wyrażenia.

(również: pamiętaj, aby dodać atrybuty key do komponentów renderowanych wewnątrz pętli.)

JSX + ES2015 : 

render() {
  return (
    <table className="MyClassName">
      <thead>
        <tr>
          {this.props.titles.map(title =>
            <th key={title}>{title}</th>
          )}
        </tr>
      </thead>
      <tbody>
        {this.props.rows.map((row, i) =>
          <tr key={i}>
            {row.map((col, j) =>
              <td key={j}>{col}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );
}

JavaScript : 

render: function() {
  return (
    React.DOM.table({className: "MyClassName"}, 
      React.DOM.thead(null, 
        React.DOM.tr(null, 
          this.props.titles.map(function(title) {
            return React.DOM.th({key: title}, title);
          })
        )
      ), 
      React.DOM.tbody(null, 
        this.props.rows.map(function(row, i) {
          return (
            React.DOM.tr({key: i}, 
              row.map(function(col, j) {
                return React.DOM.td({key: j}, col);
              })
            )
          );
        })
      )
    )
  );
}
 120
Author: Ross Allen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-08 16:25:59

Aby rozwinąć odpowiedź Rossa Allena, oto nieco czystszy wariant wykorzystujący składnię strzałek ES6.

{this.props.titles.map(title =>
  <th key={title}>{title}</th>
)}

Ma tę zaletę, że część JSX jest izolowana (nie return lub ;), dzięki czemu łatwiej jest umieścić wokół niej pętlę.

 12
Author: Jodiug,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-29 14:34:08

W duchu programowania funkcyjnego, uczyńmy nasze komponenty nieco łatwiejszymi do pracy za pomocą abstrakcji.

// converts components into mappable functions
var mappable = function(component){
  return function(x, i){
    return component({key: i}, x);
  }
}

// maps on 2-dimensional arrays
var map2d = function(m1, m2, xss){
  return xss.map(function(xs, i, arr){
    return m1(xs.map(m2), i, arr);
  });
}

var td = mappable(React.DOM.td);
var tr = mappable(React.DOM.tr);
var th = mappable(React.DOM.th);

Teraz możemy zdefiniować nasz render w następujący sposób: 

render: function(){
  return (
    <table>
      <thead>{this.props.titles.map(th)}</thead>
      <tbody>{map2d(tr, td, this.props.rows)}</tbody>
    </table>
  );
}

Jsbin

Alternatywą dla map2d byłaby funkcja Curry map, ale ludzie mają tendencję do unikania Curry.

 2
Author: FakeRainBrigand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-03 19:33:30

Shallow (via Array from():

<table>
    { Array.from({length:3}).map(() => <tr/> }
</table>

Innym sposobem byłoby poprzez tablicę fill():

<table>
    { Array(3).fill(<tr/>) }
</table>

Zagnieżdżone Węzły: 

 var table = (
      <table>
        { Array.from(Array(3)).map((tr, tr_i) => 
            <tr> 
              { Array.from(Array(4)).map((a, td_i, arr) => 
                  <td>{arr.length * tr_i + td_i + 1}</td>
               )}
            </tr>
        )}
      </table>
);

ReactDOM.render(table, document.querySelector('main'))
td{ border:1px solid silver; padding:1em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main></main>
 2
Author: vsync,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-28 19:22:58

Jest to, imo, najbardziej elegancki sposób na to (z ES6). Tworzy instancję pustej tablicy z 7 indeksami i mapuje w jednej linii: 

Array.apply(null, Array(7)).map((i)=>
<Somecomponent/>
)

Kudos to https://php.quicoto.com/create-loop-inside-react-jsx/

 1
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-14 20:48:08