Question

在使用Bootstrap网格呈现React组件时面对这个有趣的事情，假设我需要在std::ratio中呈现两个col-md-6，每个row组件都放在<Book />内} col-md-6阻止

div

它希望形成类似于以下结构，

+---------------------+
| 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>

但输出是格式错误的HTML，看起来JSX验证渲染上的每个项目，而不是等待关闭标记。

是否有任何方法或提示使其正常工作？

Answer 1

您已将JSX视为字符串而不是XML，当它被编译为JS时，它无效。

React适用于小组件，因此将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')
);

React JSX条件包装器用于引导网格

1 个答案: