Question

我正在使用我自己的Team，babel配置而不使用webpack从头开始构建简单的React应用程序。

Css导入，React组件，ES6转堆效果很好。当我创建常量文件并导入我的组件文件时，会发生错误

我已将常量移至组件本身，并且工作正常。但是当我创建常量文件并从组件导入它时，它就无法工作。

create-react-app

这是我的恒定文件代码

export default SKILLS = [
  {
    id: 1,
    title: 'React',
    point: 8,
  },
  {
    id: 2,
    title: 'Redux',
    point: 8,
  }
]

这正在导入我的组件中的一部分

文件夹结构

import SKILLS from '../data/skills';

这应该没有错误。

我在Chrome开发者控制台上遇到错误：

|-data
|  |-skills.js
|-components
|  |-ResumeSection.js

我的webpack配置：

skills.js:2 Uncaught ReferenceError: SKILLS is not defined
    at eval (skills.js:2)
    at Module../src/data/skills.js (index_bundle.js:3921)
    at __webpack_require__ (index_bundle.js:727)
    at fn (index_bundle.js:101)
    at eval (ResumeSection.js:5)
    at Module../src/components/ResumeSection.js (index_bundle.js:3874)
    at __webpack_require__ (index_bundle.js:727)
    at fn (index_bundle.js:101)
    at eval (App.js:6)
    at Module../src/App.js (index_bundle.js:3828)
(anonymous) @ skills.js:2
./src/data/skills.js @ index_bundle.js:3921
__webpack_require__ @ index_bundle.js:727
fn @ index_bundle.js:101
(anonymous) @ ResumeSection.js:5
./src/components/ResumeSection.js @ index_bundle.js:3874
__webpack_require__ @ index_bundle.js:727
fn @ index_bundle.js:101
(anonymous) @ App.js:6
./src/App.js @ index_bundle.js:3828
__webpack_require__ @ index_bundle.js:727
fn @ index_bundle.js:101
(anonymous) @ index.js:6
./src/index.js @ index_bundle.js:3933
__webpack_require__ @ index_bundle.js:727
fn @ index_bundle.js:101
(anonymous) @ client:3
0 @ index_bundle.js:3944
__webpack_require__ @ index_bundle.js:727
(anonymous) @ index_bundle.js:794
(anonymous) @ index_bundle.js:797

Answer 1

这是无效的语法，如果要使用IPage<Topic> topicsInResourceGroupPage = this.EventGridManagementClient.Topics.ListByResourceGroupAsync(resourceGroup).Result;导出，则有两个选择：

default

const SKILLS = [
  {
    id: 1,
    title: 'React',
    point: 8,
  },
  {
    id: 2,
    title: 'Redux',
    point: 8,
  }
]

export default SKILLS;

否则，您可以使用命名的导出：

export default [
  {
    id: 1,
    title: 'React',
    point: 8,
  },
  {
    id: 2,
    title: 'Redux',
    point: 8,
  }
]

但这将用作export const SKILLS = [ { id: 1, title: 'React', point: 8, }, { id: 2, title: 'Redux', point: 8, } ]

Answer 2

将const SKILLS导出到您的skill.js

export const SKILLS = [
  {
    id: 1,
    title: 'React',
    point: 8,
  },
  {
    id: 2,
    title: 'Redux',
    point: 8,
  }
]

然后导入并使用它

import {SKILLS} from "../resources/skill";

// do everything with SKILLS

持续导出不适用于反应应用程序

2 个答案: