陣營JSX有條件的包裝器引導電網

Question

只是面對這個有趣的事情，而渲染反應的組分與引導電網，假設我需要呈現2 col-md-6在row，每個<Book />組件把col-md-6div塊內

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

，並預計以形成與下面的結構，

<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時，該視圖無效。

陣營的作品以及小部件，所以打破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') 
);