reactjs 打字稿反应

reactjs - 打字稿反应

发布于 2020-03-28 23:25:54

我一直在学习React中的打字稿，并且不断遇到这些奇怪的导入问题。这与我所有的组件导入有关。

这是一个简单的导入：

import MainNav from "../components/layout/mainNav/MainNavBar";

以及导入内容：

import React from "react";
import classNames from "classnames";

const MainNavBar:React.SFC = () => {
  const classes = classNames (
    "main-navbar",
    "bg-white"
  );
  return (
    <div className={classes}>
        <nav>
          <li>Item 1</li>
          <li>Item 2</li>
        </nav>
    </div>
  );
}

export default MainNavBar;

这是给我的错误图像。我不明白我在问什么。在打字稿之前，我从未遇到过这些问题。与配置文件有关系吗？

我的tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Mat Sz 2020-01-31 17:40

这是因为macOS默认情况下在其文件系统中使用不区分大小写的文件名。这会混淆TypeScript。在文件名区分大小写的环境中，这将导致致命错误-无法找到该文件。

解决方案是只使用与路径相同的大小写：

import MainNav from "../components/layout/MainNav/MainNavBar";

Robolisk 2020-01-31 17:47:04

那确实成功了，但我确实发现这很奇怪……我的“ MainNav”文件夹明确地是“ mainNav”。我提供的字符串与我的结构完全相同。将子文件夹更改为“ MainNav”会引发循环，因为之前的文件夹或之后的任何子文件夹如何？这确实解决了我的问题。

Mat Sz 2020-01-31 17:48:56

那真的很奇怪，这就是为什么我更喜欢区分大小写的文件系统的原因-那里没有这种混乱。是您创建的项目（包括MainNav文件夹）吗？

Robolisk 2020-01-31 22:09:23

正确-我找到了可行的解决方案。我刚刚关闭vscode并重建了我的应用程序，它运行良好！知道这一点将有助于将来的错误！

reactjs - 打字稿反应

相关问题