Javascript ReactJS可以在引导中返回div吗？

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

错误：不变冲突：CardSplay.render（）：必须返回有效的ReactComponent。您可能返回了未定义、数组或其他无效对象

渲染功能如下：

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>
            );
    });
}

render:function（）{
var cars=this.state.loadedCars.map（函数（已加载）{
返回(

品牌：{loaded.Brand}
模型：{loaded.Model}
燃料：
里程：
位置：
价格：

);
控制台.日志（汽车）；
返回(
{cars}；
);
});
}

---

到目前为止，我知道错误是由于没有返回div，即使是空的，但事实并非如此。我是做错了什么，还是只是无法返回任何与引导相关的信息？（这只是我作为练习写的一个小例子，不要介意任何小错误）

React可以使用引导。您只是犯了一个错误，将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>
  );
}

render:function（）{
var cars=this.state.loadedCars.map（函数（已加载）{
返回(

品牌：{loaded.Brand}
模型：{loaded.Model}
燃料：
里程：
位置：
价格：

)
});
控制台.日志（汽车）；
返回(
{cars}；
);
}

使用引导时，React正常。您只是犯了一个错误，将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>
  );
}

render:function（）{
var cars=this.state.loadedCars.map（函数（已加载）{
返回(

品牌：{loaded.Brand}
模型：{loaded.Model}
燃料：
里程：
位置：
价格：

)
});
控制台.日志（汽车）；
返回(
{cars}；
);
}

facepalm非常感谢您。我还不得不将“class”改为“className”，一切都如我所愿。facepalm非常感谢。我还不得不将“class”改为“className”，一切都如我所愿。