使用 next js 做一个静态网站答案

【问题标题】：Using next js for a static website使用 next js 做一个静态网站
【发布时间】：2018-03-19 09:33:29
【问题描述】：

错误 - React.Children.only 期望接收单个 React 元素子元素。在相同的上下文中有很多问题，我尝试了这些解决方案，但没有找到解决方案。

网站的导航栏是给我错误的原因。导航栏上方有一个部分可以正确渲染，当我尝试渲染下方的导航栏时会引发错误。

import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'



const Homepage = () => (

  <div>
 <Head />
 <Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
    <Footer />
  </div>

);
export default Homepage

页脚显示正确，head 标签适用于所有元数据等（也适用）。所有代码的Github链接是-https://github.com/yohanelly/website-jsx/tree/master/components

【问题讨论】：

您的header.js 似乎有一些语法问题
是的，我意识到并纠正了语法问题。 li 标签有问题。但错误仍然存在。有任何想法吗？我的意思是，其余组件工作正常。
我是否遗漏了任何其他语法错误？ @GabyakaG.Petrioli

标签： reactjs jsx nextjs

【解决方案1】：

问题在于Link 和a 标记之间的空格。

<Link href="#"> <a className="menu-links features">Features</a></Link>

应该是

<Link href="#"><a className="menu-links features">Features</a></Link>

或

<Link href="#">
    <a className="menu-links features">Features</a>
</Link>

阅读 React 文档的 Children in JSX 部分了解更多信息。

【讨论】：

是的，我还漏掉了一个小语法错误。任何其他 jsx 的好资源请发给他们。非常感谢！