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

Question

我一直在尝试将一个html网站移植到Gatsbyjs并做出反应。在构建header Comparement时，我在带有的行中得到一个错误“相邻的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

在渲染导航中，将div中的所有内容包装起来，并在渲染函数中返回。

 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>
)
}

Answer 2

首先，renderNaviance（）似乎没有返回任何内容。

第二，你正在返回（？）一个div和一个nav并排。这些需要用容器包装。只能返回一个元素。

renderNavigation() {
  return ( <-- add this
    <div className="wrapper"> <-- add this
      <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> <-- add this
  ); <-- add this
}

Answer 3

我看到两个问题。

1）你需要做它所说的，并包装你的renderNaviationjsx只有一个根元素...

2） 你也需要一个返回声明。。。

  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>
    )}