React落地页开发报错：JSX元素<body>无对应闭合标签求解决

核心问题与修复步骤： #

• 移除<body>标签：React应用通常挂载在页面已存在的<body>内部节点（如#root），组件中无需再渲染<body>标签，这是导致该报错的主要原因之一，同时也不符合React组件的设计逻辑。
• 替换class为className：React中使用className替代HTML的class属性，避免与JavaScript的class关键字冲突，你的代码中所有class属性都需要修改。
• 修正自闭合标签语法：JSX中<input>、<img>等标签需使用自闭合写法（<input ... />），而非<input ...></input>，代码中的搜索输入框和提交按钮存在该问题。
• 确保单个根元素：React组件返回的JSX必须包含在单个根元素内，若有多个同级元素，可使用<div>或<React.Fragment>（简写<>）包裹。

修正后的完整代码： #

function Landing() {
    return (
        <div>
            <header>
                <div className="container">
                    <h1 className="school-logo-text float-left">
                        <a href="#"><strong>Direct</strong> Connection</a>
                    </h1>
                    <div className="site-header__menu group">
                        <nav className="main-navigation">
                            <ul>
                                <li><a href="Events.html">Events</a></li>
                                <li><a href="blog.html">Blog</a></li>
                            </ul>
                        </nav>
                        <div className="site-header__util">
                            <a href="login.html" className="btn btn--small btn--orange float-left push-right">Login</a>
                            <form className="" action="front-page.html" method="post">
                                <input type="text" name="value" value="" placeholder="Search DC" />
                                <input type="submit" name="" />
                            </form>
                        </div>
                    </div>
                </div>
            </header>

            <div className="page-banner">
                <div className="page-banner__bg-image" style={{backgroundImage: 'url(images/connection.jpg)', height: '579px', width: '100%'}}></div>
                <div className="page-banner__content container t-center c-white">
                    <h1 className="headline headline--large">Direct Connection</h1>
                    <a href="" className="btn btn--large btn--blue">Companies</a>
                    <div className="row">
                        <div className="col-xs-12 col-md-10 col-md-offset-1-text-center white">
                            <h1>What DC has to offer</h1>
                            <p>DC is a company that makes connecting faster, easier and more convenient. We can help you and your company to get your personal
                                or business name out there. We are the first Online Company convention center. 
                                You will find yourself traveling through a variety of companies that you can interact with online. You
                                can locate a company and immediately request open bids on projects, connect with different departments through the company, send payment and receive payment, 
                                find the next date that company will be interacting and do live meetings and marketing via zoom, webinars, skype and much more. Think as if you just saved yourself hours on
                                end locating your next company project and add a few members to your team along the way.    
                                Find what request application forms and highly qualified employees  connected to Companies that Qualified employees,  future investors, employees
                                with  other swap company information swap, quotes send quotes, futuristic, billing processing. DC connections can help get companies` portfolios easily available.</p>
                        </div>
                    </div>
                    <div className="full-width-split group">
                        <div className="full-width-split__one">
                            <div className="full-width-split__inner">
                                <h2 className="headline headline--small-plus t-center">Upcoming Events</h2>

                                <div className="event-summary">
                                    <a className="event-summary__date t-center" href="#">
                                        <span className="event-summary__month">Mar</span>
                                        <span className="event-summary__day">25</span>
                                    </a>
                                    <div className="event-summary__content">
                                        <h5 className="event-summary__title headline headline--tiny"><a href="#">Traffic Control Items</a></h5>
                                        <p>We will have a discussion to discuss any traffic control items any company needs for improvement<a href="#" className="nu gray">Learn more</a></p>
                                    </div>
                                </div>
                                <div className="event-summary">
                                    <a className="event-summary__date t-center" href="#">
                                        <span className="event-summary__month">Apr</span>
                                        <span className="event-summary__day">02</span>
                                    </a>
                                    <div className="event-summary__content">
                                        <h5 className="event-summary__title headline headline--tiny"><a href="#">Chattanooga Traffic Plan</a></h5>
                                        <p>In this event, we will discuss how we need to set up for lane closures. <a href="#" className="nu gray">Learn more</a></p>
                                    </div>
                                </div>

                                <p className="t-center no-margin"><a href="#" className="btn btn--blue">View All Events</a></p>
                            </div>
                        </div>

                        <div className="full-width-split__two">
                            <div className="full-width-split__inner">
                                <h2 className="headline headline--small-plus t-center">From Our Blogs</h2>
                                <div className="event-summary">
                                    <a className="event-summary__date event-summary__date--beige t-center" href="">
                                        <span className="event-summary__month">Dec</span>
                                        <span className="event-summary__day">29</span>  
                                    </a>
                                    <div className="event-summary__content">
                                        <h5 className="event-summary__title headline headline--tiny"><a href="">Welcome Southern Company</a></h5>
                                        <p>Southern Company has decided to join our community! <a href="" className="nu gray">Read more</a></p>
                                    </div>
                                </div>

                                <p className="t-center no-margin"><a href="http://direct-connection.local/blog" className="btn btn--yellow">View All Blog Posts</a></p>
                            </div>
                        </div>
                    </div>
                    <footer className="site-footer">
                        <div className="site-footer__inner container container--narrow">
                            <div className="group">
                                <div className="site-footer__col-one">
                                    <h1 className="school-logo-text school-logo-text--alt-color">
                                        <a href="index.html"><strong>Direct</strong> Connection</a>
                                    </h1>
                                    <p><a className="site-footer__link" href="index.html">706-263-0175</a></p>
                                </div>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    )
}

export default Landing

额外说明： #

• 代码中还修正了style属性的写法：JSX中style需接收对象格式，而非字符串，所以将style="background-image: url(...)"改为style={{backgroundImage: 'url(...)', ...}}。
• 把搜索输入框和提交按钮移动到了<form>标签内部，符合HTML表单的正确结构。

内容的提问来源于stack exchange，提问作者cube901