如何在反应中导入根路径之外的组件? [英] How to import a component outside root path in react?

问题描述

我有两个 React 应用程序，

I am having two react applications,

项目 A

项目 B

这里的Project A只不过是一个简单的组件应用程序，它包含唯一的公共组件.

Here Project A is nothing but a simple components application and it contains the only common components.

-> src
    -> components
       -> Button

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

This is a very simple button component I have in the Project A.

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

Now the requirement is that I am in the need to use this common button component inside any other react applications.

在这个场景中，我需要在 Project B 中使用 Project A 中的 Button 组件.

Here in this scenario, I need to use Button component from Project A inside Project B.

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

For which I tried some relative import (I understand it is completely wrong) inside src/App.js file of Project B like,

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

但它给出了预期的错误，

But it gives the error as expected,

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 中?

So could anyone help me how to include the button component from Project A inside Project B ?

注意:

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

I cannot do copy paste of code and also strictly I need to import it from project to project only.

此外，两个项目都位于一个文件夹下，例如，

Also both the projects lies under a single folder like,

->Folder
  -> Project A
  -> Project B

推荐答案

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

Since privacy is an issue, I would suggest developing it as a library and instead of publishing it to npm, you can just include it in your package.json with a git path. This way, you can push your lib to a private git repo and keep everything in sync.

第一步

使用新的 git 存储库创建一个新项目(例如项目 C).设置应该像一个 npm 包，但你永远不会将它发布到 npm.仅用于导入.

Create a new project (e.g. project C) with a new git repository. The setup should be like a npm package, but you will never publish it to npm. It's just for importing.

这里有一个教程哒

第 2 步

将你想要共享的所有组件从共享项目 C 中的项目 A 中移出.推送给你的私有 git repo 以发布"；所有更改.

Move all components you want to share from project A in the shared project C. Push to you private git repo to "publish" all changes.

步骤 3

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

Adjust the package.json from project A and project B to include the new project C, so both can use the shared components.

例如package-name":git+ssh://[e-mail]:/shared-project-c.git" git+ssh 在这个答案中解释

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

After npm install / yarn install, you can use your components like any other library.

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

<MySharedButton... />

这篇关于如何在反应中导入根路径之外的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！