如何在反应中导入根路径之外的组件？

Posted 2023-02-22

【中文标题】如何在反应中导入根路径之外的组件？

【英文标题】：How to import a component outside root path in react?

【发布时间】：2021-07-26 11:04:21

【问题描述】：

我有两个反应应用程序，

项目 A

项目 B

这里的Project A 只是一个简单的组件应用程序，它包含唯一的通用组件。

-> src
    -> components
       -> Button

这是我在Project A 中的一个非常简单的按钮组件。

现在的要求是我需要在任何其他 React 应用程序中使用这个通用按钮组件。

在这种情况下，我需要在Project B 中使用来自Project A 的Button 组件。

为此我在src/App.js Project B 的文件中尝试了一些相对导入（我理解这是完全错误的），

import Button from "../../../Project A/src/components

但它给出了预期的错误，

Module not found: You attempted to import ../../../Project A/src/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

那么任何人都可以帮助我如何将来自Project A 的按钮组件包含在Project B 中？

注意：

我不能复制粘贴代码，而且我只需要将它从project 导入到project。

这两个项目也位于一个文件夹下，例如，

->Folder
  -> Project A
  -> Project B

【问题讨论】：

对于相同的场景，我会将一个包发布到 npm 并将其用于不同的项目。或者只是复制粘贴组件。我猜他们不会处理相同的数据。

@SifatHaque，我不能复制粘贴。如果这样做，我可能不会自己发布这个问题。但这不是在 npm 中发布并使用它的东西，而是我只需要导入从One Project 到Another Project ..

【参考方案1】：

由于隐私是一个问题，我建议将其开发为一个库，而不是将其发布到 npm，您可以将其包含在您的 package.json 中并使用 git 路径。这样，您可以将您的库推送到一个私有 git 存储库并保持所有内容同步。

第 1 步

使用新的 git 存储库创建一个新项目（例如项目 C）。设置应该像一个 npm 包，但你永远不会将它发布到 npm。只是为了导入。

Here is a tutorial on what to da

第 2 步

将您想要从项目 A 共享的所有组件移到共享项目 C 中。推送给您的私有 git 存储库以“发布”所有更改。

第 3 步

调整项目 A 和项目 B 中的 package.json 以包含新项目 C，以便两者都可以使用共享组件。

例如"package-name": "git+ssh://[e-mail]:<user>/shared-project-c.git"git+ssh explained in this answer

在npm install / yarn install 之后，您可以像使用任何其他库一样使用您的组件。

import MySharedButton from "my-shared-project-c"

<MySharedButton... />

【讨论】：

无法理解您的意思，将其开发为库意味着我应该将 Project A 的代码推送到单独的 github 存储库并在 Project B - package.json 文件中使用该 github 存储库？

您应该将它包含在两个项目中。我希望您在项目 A 中也需要它，因为它已经在这个项目中。

它基本上是一个包含所有共享组件的存储库，就像您在大型单声道存储库中所做的那样。

我需要在Project A 中包含Project A 中的至少Button 组件（即使我有更多的组件，如导航栏、加载程序等）Project B 这是我的要求。

对不起，我是新手，所以我之前没有在单声道回购中工作过..

【参考方案2】：

您需要跨项目创建可重用组件。 您可以使用 Bit.dev 创建可重用组件

从以下网址了解更多详情： https://blog.bitsrc.io/6-ways-to-share-and-reuse-react-components-6d80e2fd16cd