оператор импорта в React / Gatsby - PullRequest
Новая
       348

оператор импорта в React / Gatsby

1 голос
/ 07 августа 2020

Я изучаю 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

Это не дает мне следующей ошибки:

Ошибка: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга 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;
`

1 Ответ

3 голосов
/ 07 августа 2020

Это проблема не с вашим импортом, а с вашим экспортом. Вы не экспортировали StyledHeader.

Этот оператор export * from "./DesktopMenu" экспортирует все указанные экспортные данные из файла DesktopMenu. Вы ничего не экспортировали из этого файла, поэтому index.js также ничего не будет экспортировать.

Просто экспортируйте константу, чтобы файл index.js мог ее найти: 

export { StyledHeader };
...