解析错误：添加<img>时，react jsx中出现意外的令牌，预期为“，”

Question

我在组件中收到此错误：

解析错误：意外的令牌，预期为“，”

import React from 'react';

import logo from '../../Images/Logo.svg';

class Simulate extends React.Component{

    render(){

        return(

            this.state.wentWrong?

             (<div className="went-wrong-box">

                <div className="went-wrong-title">

                    <div className="went-wrong-title__img">

                        <img src={logo} alt="Logo">

                    </div>

                </div>

            </div>)

            :

            (<div>

                Other Content

            </div>)

        )

    }

}

我非常确定image标记中的问题，尽管已经导入了src中使用的徽标，但是如果我用字符串替换src中的徽标，也会发生这种情况，但是如果我删除了图像，它就可以工作：

return(

    this.state.wentWrong?

     (<div className="went-wrong-box">

        <div className="went-wrong-title">

            <div className="went-wrong-title__img">

            </div>

        </div>

    <div>)

    :

    (<div>

        Other Content

    </div>)

)

Answer 1

您忘记了关闭您的标签<img>和最后一个<div>标签。(<div className="went-wrong-box">&nbsp; &nbsp; &nbsp; <div className="went-wrong-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="went-wrong-title__img">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={logo} alt="Logo" /> // <- close this&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div></div>) // <- close this