Блог

Я хочу создать вложенные элементы в react js, но, похоже, следующее не работает.

         var allSeats = [];
        for( let i = 0 ; i<5 ; i   ) {
          allSeats.push( <div className="each-row"> );
          for( let j=0; j<2 ; j   ) {
            allSeats.push( <div className="each-seat">hei</div> );
          }
          allSeats.push( </div> );
        }

        return (
          <div className="theater">
            {allSeats}
          </div>
        );
  

Что не так с приведенным выше кодом?

Петр прав — гораздо лучше разделить ваш код на компоненты. Но на всякий случай, вот исправленный фрагмент, как у вас:

 var rows = [];

    for(let i=0; i<5; i  ) {
        var seats = [];

    for(let j=0; j<2; j  ) {
        seats = seats.concat(<div className="seat"></div>);
    }

    rows = rows.concat(<div className="row">{seats}</div>);
}

return (
    <div className="theater">
        {rows}
    </div>
);
  

Как отметил Фабиан, элементы JSX должны быть закрыты:

Все теги должны быть закрыты либо с помощью самозакрывающегося формата, либо с помощью соответствующего закрывающего тега https://facebook.github.io/react/tips/self-closing-tag.html

Будет ли разделение на компоненты работать для вашего предполагаемого использования? Демонстрация здесь: http://codepen.io/PiotrBerebecki/pen/ALabXK

 class Rows extends React.Component {
  render() {

    var allRows = [];
    for( let i = 0 ; i<5 ; i   ) {
      allRows.push( <div className="each-row">Row<Seats /></div> );   
    }

    return (
      <div className="theater">
        {allRows}
      </div>
    );
  }
}


class Seats extends React.Component {
  render() {

    var allSeats = [];

    for( let j=0; j<2 ; j   ) {
      allSeats.push( <div className="each-seat">Seat</div> );
    }

    return (
      <div className="seats">
        <b>{allSeats}</b>
      </div>
    );
  }
}

ReactDOM.render(
  <Rows />,
  document.getElementById('app')
);