React.js - 无法将简单变量从一个文件导入另一个文件答案

【问题标题】：React.js - Cannot import simple variable from one file into anotherReact.js - 无法将简单变量从一个文件导入另一个文件
【发布时间】：2020-12-18 16:53:00
【问题描述】：

我不知道如何将一个极其简单的变量从一个文件导入另一个文件（新的反应）。我有主要的 App.js，其中第 3 行似乎是问题所在：

import React, {Component} from "react";
import NavMenu from "./components/nav-menu";
import navLinks from "/components/nav-links";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      navLinks: navLinks
    }
  }

  render() {
    return (
      <div id="container">
        <NavMenu navLinks={this.state.navLinks} />
      </div>
    );
  } 
}

从nav-links.js 文件中导入（或应该导入）navLinks 变量：

import React from 'react';

export const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

有人可以指出我在这里出错的正确方向吗？此外，它仅用于呈现导航菜单（因此标签内的链接） - 这通常是添加导航链接的正确方法吗？

Stackblitz：https://stackblitz.com/edit/react-j42gep

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您缺少默认导出导航链接：

import React from 'react';

 const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

  export default navLinks;

并在import navLinks from "./components/nav-links"; 中添加点.

【讨论】：

仍然无法解决此错误：找不到模块：您尝试导入项目 src/ 目录之外的 /components/nav-links。不支持 src/ 之外的相对导入。
您在import navLinks from "./components/nav-links"; 中也缺少.

【解决方案2】：

如果你这样做：

export const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

那你导入错了。然后这样做：

import {navLinks} from "./components/nav-links";

注意这一点：./components/nav-links 你在导入语句中忘记了./

如果您不想在导出中使用 {} 添加默认语句，如下所示：

const navLinks = [
    {
      name: "home",
      href: "/"
    },
    {
      name: "subs",
      href: "/subs"
    }
  ];

  export default navLinks;

【讨论】：