Question

我找到了以下代码。 @代表什么，这是反应的标准吗？导入组件的更好方法是什么？

a)

import Box from '../../../components/Box '

b)

import Box from '@components/Box '

Answer 1

如果您使用的是 Typescript（标签表明您是），则可以在 tsconfig.json 中设置“路径映射”

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@": ["./src"],
      "@/*": ["./src/*"],
      "@components": ["./src/components"]
    }
  }
}

参考：https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

因此，很难更新 tsconfig.json 中的所有路径，因此我建议使用第一个选项

Answer 2

@components 是 components 文件夹的别名。

看看示例 a 是如何遍历一堆文件夹才能访问组件的，相对于使用该语句的任何位置？好吧，第二个选项通过将从 components 文件夹导入的所有内容都视为 @components 来简化日志，因此在与您所在的位置进行比较时，您不再需要担心找出一个文件夹的位置.

如果您选择这样做，这通常需要对 webpack 进行更多配置。 Here is a blogpost I found explaining how and why

另外，回答原来的问题，他们都是正确的。 a 只是更传统和默认的方式，而 b 是一种替代方法，它可能需要一些额外的设置，但会让您的导入更有条理且更易于理解。

Answer 3

两者都是正确的，除了根据您需要导入的内容并不总是有效之外，没有真正的好处。

当您需要导入项目源代码中存在的组件时，您可以使用a)。

对于b)，在处理作为项目依赖项存在的 NPM 包时，您通常会看到此语法。其中一些以组织/图书馆为前缀，其他只是图书馆的名称。例如：nan

如何在反应应用程序中正确导入组件？

3 个答案: