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

Question

我一直在尝试将一个 html 网站移植到 Gatsbyjs 和 React。 在构建标题隔间时，我在带有 . 我无法弄清楚问题所在，请寻求帮助。 我使用有状态组件构建它的原因是我稍后会为其添加一些额外的功能。

这是我的代码：

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

首先，renderNavigation() 似乎没有返回任何内容。

其次，您将并排返回 (?) 一个 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 2

我看到了两个问题。

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 3

在 renderNavigation 中，将所有内容包装在 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>
)
}