Question

我一直试图将html网站移植到Gatsbyjs和React。构建标头分隔区时，在带有的行中出现错误“相邻JSX元素必须包装在封闭标签中”错误。我无法解决问题，请寻求帮助。之所以使用有状态组件来构建它，是因为稍后我将为其添加一些额外的功能。

这是我的代码：

import React, {Component} from 'react'
import { Link } from 'gatsby'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import get from 'lodash/get'
import PropTypes from 'prop-types'
import Image from 'components/image'





class Header extends React.Component {

        constructor(props) {
        super(props);

        this.state = {
          windowWidth: 1081,
          mobileNavVisible: false
        };
        }





  renderNavigation() {
            <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true"/></Link></div>
            //Site Navigation-->
            <nav className="navbar pull-right">
              <div className="navbar-header">
                <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
              </div>

              <ul className="site-navigation">
                <li className="active"><Link to="/">Anasayfa</Link>

                </li>
                <li><Link to="menu" >Menü</Link>

                </li>
                <li><Link to="contact">İletişim</Link></li>
              </ul>
            </nav>
    }


  render() {
  return(
      <div className="menu-style-2 responsive sticky-menu">
        <div className="site-wrapper">
          <header className="site-header">   
            <div className="container">
              <div className="row">
              {this.renderNavigation()}
              </div>
            </div>
          </header>
        </div>
     </div>   
  )
}
}

export default Header

Answer 1

我看到两个问题。

1）您需要按照上面所说的做，并且只用一个根元素包装renderNavigation jsx ...

2）您在那里也需要一个return语句...

  renderNavigation() {
    return (
      <React.Fragment>
        <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true" /></Link></div>
        //Site Navigation-->
        <nav className="navbar pull-right">
          <div className="navbar-header">
            <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
          </div>

          <ul className="site-navigation">
            <li className="active"><Link to="/">Anasayfa</Link>

            </li>
            <li><Link to="menu" >Menü</Link>

            </li>
            <li><Link to="contact">İletişim</Link></li>
          </ul>
        </nav>
        <React.Fragment>
    )}

Answer 2

首先，renderNavigation（）似乎不返回任何内容。

第二，您将并排返回（？）div和导航。这些需要包装在容器中。您只能返回一个元素。

currentTime

Answer 3

在renderNavigation中，将所有内容包装在divs中，然后在render函数中返回它。

 renderNavigation() {
  return(
        <div>
        <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true"/></Link></div>
        //Site Navigation-->
        <nav className="navbar pull-right">
          <div className="navbar-header">
            <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
          </div>

          <ul className="site-navigation">
            <li className="active"><Link to="/">Anasayfa</Link>

            </li>
            <li><Link to="menu" >Menü</Link>

            </li>
            <li><Link to="contact">İletişim</Link></li>
          </ul>
        </nav>
       </div>
)
}

相邻的JSX元素必须包装在封闭标签中

3 个答案: