Javascript 如何从不同的CreateReact应用程序项目本地导入React组件？

我已经创建了两个React应用程序，分别称为

client

和

admin client

，这两个应用程序都使用

create React app

在

管理客户端

中，我想重用

客户端

中已经存在的一些组件，以避免代码重复

例如，我在

client/src/components/

目录中有一个

Header.jsx

文件，我想在

admin client

中重用该文件，如下所示：

import React from 'react';

function Header() {
    return (
        <header>
            <h2>Hello World!!</h2>
        </header>
    );
}

export default Header;

（

admin

和

admin客户端

位于同一父目录中）

然后在

admin client/src/App.jsx

中，我尝试导入

Header.jsx

，如下所示：

NODE_PATH='./../'

import React from 'react';
import {Header} from 'client/src/components/Header.jsx';

function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

export default App;

从“React”导入React；
从'client/src/components/Header.jsx'导入{Header}；
函数App（）{
返回(
);
}
导出默认应用程序；

但我得到了以下错误：

../client/src/components/Header.jsx 5:8
Module parse failed: Unexpected token (5:8)
You may need an appropriate loader to handle this file type.
| function Header() {
|     return (
>         <header>
|             <h2>Hello World!!</h2>

。/client/src/components/Header.jsx 5:8
模块分析失败：意外令牌（5:8）
您可能需要适当的加载程序来处理此文件类型。
|函数头（）{
|返回(
>         
|你好，世界！！

---

我更喜欢找到一个不涉及直接处理Babel和/或Webpack的解决方案，因为这是我首先使用

create react app

的原因。

这不是一个简单的任务，如果你手动操作，你可能会在你的repo上做很多更改，只是为了让它与你的其他应用同步。我建议您安装名为

Bit

的软件包，该软件包允许您在项目之间共享和同步UI组件。您可以在此处阅读更多信息：

NPM

使用NPM安装钻头：

npm安装bit bin--全局

在windows上安装Bit时，添加--no optional标志：npm install Bit bin--global--no optional

---

您可以将您的shareable react项目用作另一个项目的依赖项，您可以在包json dependencies中提到它，并导入我们在任何其他节点项目中的做法

在这里提到我遇到的一个中等职位：

---

如果这有帮助，请告诉我。

谢谢，我现在可以重用我的React组件。您对重用SASS样式有什么建议吗？目前我为每个React组件都有一个单独的.scss文件。但我只能导出组件，不能导出样式。