使用 React 组件呈现 UI 时出错

Question

我正在使用需要在 UI 中呈现的基本 React 组件，但是当我尝试这样做时遇到以下问题。

未捕获错误：解析错误：第 37 行：意外标记} 在 http://localhost:63342/Sublime_Kishore/Tools/components/Body.jsx:37:undefined } ^

请在下面找到我的 jxs 文件。

var Body=React.createClass({
    render: function () {
        return(
            <div>
            <div className="header_div">
                <img src="images/newsradio.png" className="_logo" />
                    <button type="button" className="btn btn-default btn-lg login-btn">
                        <i className="fa fa-facebook fa-1.5x fbtn" styles="font-weight: bold;"></i><span>Login</span>
                    </button>
            </div>
            <div className="container_div">
            <div className="headers">
            <div className="production">Production</div>
            <div className="preprod">Pre-Production</div>
            <div className="qa">QA</div>
            <div className="dev" styles="width: 17%;">Development</div>
            </div>
            <ul className="production_block_main">
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            <li className="hovicon effect-1 sub-a"><img src="images/QA_tool_b.png" styles="margin-right: 30px;" /><span styles="font-family:initial">Enterprise</span></li>
            </ul>
            <div>

        );
    }  //This line is showing as error in my browser
})

Answer 1

您在 </ul> 之前错过了 </div>，也关闭了最后 </div>

     </ul>
  </div>
</div>

Example

使用 React 组件呈现 UI 时出错

Error in Rendering UI using React Component

javascript

rendering

reactjs