预期对应的 JSX 关闭错误

Question

我正在用 Reactjs 构建 Web 应用程序。在从数据服务器映射记录的循环中，我收到此错误：

预期对应的 JSX 关闭

在这一行

<h5>Still Water <br> 500 ml</h5>

完整的 catalog.jsx 代码：

var React = require('react');
var Parse = require('parse').Parse;
var ParseReact = require('parse-react');

module.exports = React.createClass({
mixins: [ParseReact.Mixin],

getInitialState: function() {
  return {
    error: null,
    signup: false
  };
},
//Observe Function - a newly proposed function for prarse react integration
observe: function() {
  //declare any variable you need here.
  return {
    product: (new Parse.Query('product'))
              .ascending('createdAt')
  };
},

  render: function() {
    var content = (
      <div>
        no product
      </div>
    );

    if(this.data.product.length){
      var content = (
        <div >
          {this.data.product.map(function(p) {

            return (
              //<div>Abdulrhman</div>

                //From Design
                <div className="col-md-4">

                    <div className="item text-center">

                        <div className="photo">
                            <img src="images/small-blue.png">
                            <br><br>
                            <h5>Still Water <br> 500 ml</h5>
                        </div>

                        <div className="action">
                            <button type="button" className="btn btn-primary">Add</button>
                        </div>

                    </div>
                </div>

            );
          }, this)}
        </div>

      );

    }
    else{
      var content = (<div>

      </div>)
      }
    return content;
  },

  ImgSizeFnc: function(size){
    if(size === 'small')
    return 'width="100px" height="1000px"';
  }

});

我需要找出这个错误。

Answer 1

所有标签都需要关闭：Self-closing tags

您的<br> 和<img> 标签中需要/。

<br />
<img src="images/small-blue.png" />