React / Gatsby 中的导入语句答案

【问题标题】：import statement in React / GatsbyReact / Gatsby 中的导入语句
【发布时间】：2020-11-27 19:59:28
【问题描述】：

我正在学习 React 和 Gatsby，并且我在我的项目中使用样式化组件。我下载了默认的 gatsby 项目。我的设置如下，我创建了一个名为 styledComponents 的目录，在那里我有一个名为 DestkopMenu.js 的文件，具有相同的样式。

import styled from "styled-components"

const StyledHeader = styled.header`
  display: flex;
  position: fixed;
  align-items: center;
  width: 100%;
  top: 0;
  z-index: 10;
  padding: 0 0.5rem;
  background: white;
`

在同一个文件夹中，我还有 index.js，它具有以下代码：

export * from "./DesktopMenu"

在我的组件文件夹中，我有一个名为 DesktopNav.js 的文件，我尝试使用以下代码导入我的样式组件：

import React, { useEffect, useRef, useState } from "react"
import { Link } from "gatsby"
import { StyledHeader } from "../styledComponents"

const DesktopNav = () => {
  return (
    <StyledHeader>
      <h1>Home</h1>
    </StyledHeader>
  )
}

export default DesktopNav

这失败给我以下错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件），但得到：不明确的。您可能忘记从文件中导出组件它是在其中定义的，或者您可能混淆了默认导入和命名导入。

检查DesktopNav的渲染方法。

所以，我想我的导入语句是错误的……

将样式化的组件放在同一个文件中时，它自然会使用以下代码：

import React, { useEffect, useRef, useState } from "react"
import { Link } from "gatsby"
import styled from "styled-components"
//import { StyledHeader } from "../styledComponents"

const DesktopNav = () => {
  return (
    <StyledHeader>
      <h1>Home</h1>
    </StyledHeader>
  )
}

export default DesktopNav

const StyledHeader = styled.header`
  display: flex;
  position: fixed;
  align-items: center;
  width: 100%;
  top: 0;
  z-index: 10;
  padding: 0 0.5rem;
  background: white;
`

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

这不是您的导入问题，而是您的导出问题。你没有导出StyledHeader。

这条语句export * from "./DesktopMenu" 将从文件DesktopMenu 中导出所有命名的导出。您没有从该文件中导出任何内容，因此index.js 也不会导出任何内容。

只需导出 const 以便index.js 文件可以找到它：

export { StyledHeader };

【讨论】：