javascript - ReactJS 可以在 Bootstrap 中返回 div 吗？

Question

我刚刚开始使用 ReactJS 并遇到了这个错误

Error: Invariant Violation: CarDisplay.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

渲染函数是这样的:

render: function() {
    var cars = this.state.loadedCars.map(function(loaded) {
        return (
                <div class="row">
                    <div class="col-md-7">
                        <a href="#">
                            <img class="img-responsive" src="http://placehold.it/700x300" alt=""></img>
                        </a>
                    </div>
                    <div class="col-md-5">
                        <ul class="list-group">
                            <li class="list-group-item"><b>Brand: {loaded.brand}</b></li>
                            <li class="list-group-item"><b>Model: {loaded.model}</b></li>
                            <li class="list-group-item"><b>Fuel: </b></li>
                            <li class="list-group-item"><b>Mileage: </b></li>
                            <li class="list-group-item"><b>Location: </b></li>
                            <li class="list-group-item"><b>Price: </b></li>
                        </ul>
                        <a class="btn btn-primary" href="#">Buy it! <span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                </div>
        );

        console.log(cars);

        return (<div>
                    {cars};
                </div>
            );
    });
}

到目前为止，我知道错误是由于未返回 div 引起的，即使是空白，但事实并非如此。我是否做错了什么，或者 React 无法返回与 Bootstrap 相关的任何内容？ (这只是我作为练习而写的一个小例子，不要介意任何小错误)

Answer 1

React 与 bootstrap 兼容。您只是犯了一个错误，将 render 方法的 return 语句放在 .map() 函数中。您的 render() 方法没有返回任何内容，这就是触发上述错误的原因。正确的代码应该如下所示:

render: function() {
    var cars = this.state.loadedCars.map(function(loaded) {
        return (
            <div class="row">
                <div class="col-md-7">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/700x300" alt=""></img>
                    </a>
                </div>
                <div class="col-md-5">
                    <ul class="list-group">
                        <li class="list-group-item"><b>Brand: {loaded.brand}</b></li>
                        <li class="list-group-item"><b>Model: {loaded.model}</b></li>
                        <li class="list-group-item"><b>Fuel: </b></li>
                        <li class="list-group-item"><b>Mileage: </b></li>
                        <li class="list-group-item"><b>Location: </b></li>
                        <li class="list-group-item"><b>Price: </b></li>
                    </ul>
                    <a class="btn btn-primary" href="#">Buy it! <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
       )
  });

  console.log(cars);

  return (
      <div>
          {cars};
      </div>
  );
}