React 语法错误：<img> 应有相应的 JSX 结束标记答案

【问题标题】：React Syntax Error : Expected corresponding JSX closing tag for <img>React 语法错误：<img> 应有相应的 JSX 结束标记
【发布时间】：2016-11-30 18:01:40
【问题描述】：

我是 React 的初学者，我尝试从 FreeCodeCamp 做一个“Camper Leader Board”项目。在 StackOverflow 代码 sn-p 中它抛出了我：
` "message": "SyntaxError: Inline Babel script: 需要对应的 JSX 结束标记请帮我找出问题所在。代码如下：

"use strict";
class TableBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    loadCampersFromServer() {
        fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')//alltime or recent
            .then(
                (response) => {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ${response.status}');
                        return;
                    }
                    response.json().then((data) => {
                        console.log('getting data:', data);
                        this.setState({data: data});

                    })
                }
            )
            .catch(function (err) {
                console.log('Fetch Error :-S', err);
            });
    }

    componentDidMount() {
        this.loadCampersFromServer();
    }

    render() {
        return <CampersList />;
    }
}

class CampersList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        console.log(this.state);
        let campersNodes = this.state.data.map((element, index) => {
            return (
                <Camper user={element} index={index} />

            );
        });
        return (
            <table>
                <tr>
                    <th>#</th>
                    <th>Camper Name</th>
                    <th>Points in past 30 days</th>
                    <th>All time points </th>
                </tr>
                {campersNodes}
            </table>
        )
    }
}


class Camper extends React.Component{
     constructor(props){
         super(props);
     }
     render(){
         <tr>
             <td>{this.props.index}</td>
             <td>
                 <img src = {this.props.user.img} alt="logo">
                 {this.props.user.userName}
             </td>
             <td>{this.props.user.recent}</td>
             <td>{this.props.user.alltime}</td>
         </tr>
     }
}

ReactDOM.render(<TableBox />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【问题讨论】：

标签： reactjs babeljs

【解决方案1】：

您需要使用关闭/> 关闭您的img 标记：

<img src={this.props.user.img} alt="logo" />

在正确关闭标签方面，JSX 不像 HTML 那样宽松。

【讨论】：

这种情况是否有特定原因，即 JSX 与 HTML 不同？

【解决方案2】：

编译器返回的消息告诉您 img 元素没有结束标记。 JSX 与 html 不同。

<img src = {this.props.user.img} alt="logo"></img>

或

<img src = {this.props.user.img} alt="logo" />

【讨论】：

【解决方案3】：

由于错误说明，您需要关闭露营者组件中的图像标签。

<td>
    <img src = {this.props.user.img} alt="logo" />{this.props.user.userName}
</td >

这应该可行。

【讨论】：

【解决方案4】：

这适用于我在节点中构建 Gatsby/React/Bootstrap 项目时收到的 JSX 错误

<img src = {this.props.user.img} alt="logo" />

【讨论】：