は、私が<code>row</code>で2 <code>col-md-6</code>をレンダリングする必要があると仮定すると、ブートストラップ・グリッドにコンポーネントを反応させるのレンダリング中にちょうどこの面白いことに直面

Question

ブートストラップグリッドのJSX条件付きラッパーを反応して、各<Book />コンポーネントは

+---------------------+ 
| col-md-6 | col-md-6 | 
| Book  | Book  | <--- row 
|---------------------| 
| col-md-6 | col-md-6 | 
| Book  | Book  | <--- row 
+---------------------+ 

col-md-6 divブロックの内側に置かれています私は、次のようにレンダリングしてみました何

、それは以下の構造に似て形成することを期待、

<Row> 
    <Col> 
     <Book /> 
    </Col> 
    <Col> 
     <Book /> 
    </Col> 
</Row> 
<Row> 
    <Col> 
     <Book /> 
    </Col> 
    <Col> 
     <Book /> 
    </Col> 
</Row> 

、

export default class BookList extends React.Component { 
    render() { 
     let books = []; 
     lodash.each(this.props.books, function (book, index) { 
      index % 2 === 0 ? books.push(<div className="row" key={index}>): null; 
      books.push(
        <div className="col-md-6"> 
         <Book /> 
        </div> 
      ) 
      index % 2 === 1 || index === this.props.books.length - 1? books.push(</div>): null 
     }) 

     return (
      <div className="container"> 
       {books} 
      </div> 
     ) 
    } 
} 

出力が不正な形式のHTMLで、JSXがレンダリング時に各項目を検証して終了タグを待たないように見えます。

正しく動作させる方法やヒントはありますか？

Answer 1

あなたはJSXをXMLの代わりに文字列として扱いました.JSにコンパイルされたとき、JSXは無効でした。

は小さな部品でうまく動作に反応するので、ペアにBooksContainerを破るとBooksRowsをレンダリングし、BooksRowsは（fiddle - 結果を検査）本をレンダリングします：

コード：

const Book = ({ book }) => (
    <div className="col-md-6"> 
    { book.name } 
    </div> 
); 

const BooksRow = ({ bookPair }) => (
    <div className="row"> 
    { 
     bookPair.map((book, index) => (
     <Book key={ index } book={ book }/> 
    )) 
    } 
    </div> 
); 

const BooksContainer = ({ books }) => (
    <div className="container"> 
    { 
     books.reduce((pairs, book, index) => { // split the books into pairs 
     if(index % 2 === 0) { 
      pairs.push([]); 
     } 
     pairs[pairs.length - 1].push(book); 
     return pairs; 
     }, []).map((pair, index) => (// map the pairs to row 
     <BooksRow key={ index } bookPair={ pair } /> 
    )) 
    } 
    </div> 
); 

const books = [ 
    { 
    name: 'cats' 
    }, 
    { 
    name: 'dogs' 
    }, 
    { 
    name: 'rabbits' 
    }, 
    { 
    name: 'elephents' 
    }, 
    { 
    name: 'snails' 
    }, 
    { 
    name: 'tigers' 
    } 
]; 

ReactDOM.render(
    <BooksContainer books={ books } />, 
    document.getElementById('container') 
);