Question

我已经使用client创建了两个名为admin-client和create-react-app的React应用程序。

在admin-client中，我想重用client中已经存在的一些组件，以避免代码重复。

例如，我在Header.jsx目录中有一个client/src/components/文件，我想在admin-client中重新使用它，如下所示：

import React from 'react';

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

export default Header;

这是我尝试过的（但失败了）：

我已经在.env项目目录中创建了一个admin-client文件，如下所示：

NODE_PATH='./../'

（{admin和admin-client在同一父目录中）

然后在admin-client/src/App.jsx内，我尝试如下导入Header.jsx：

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

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

export default 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>

我更喜欢找到一个不涉及直接与Babel和/或Webpack进行交易的解决方案，因为这就是我首先使用create-react-app的原因。

Answer 1

如果您手动进行，这不是一件简单的任务，您可能最终会在存储库上进行大量更改，只是使其与其他应用程序同步。我建议您安装一个名为Bit的软件包，该软件包可让您在项目之间共享和同步UI组件。您可以在这里了解更多信息：https://docs.bit.dev/docs/installation.html

NPM

使用NPM安装位：

npm install bit-bin --global

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

Answer 2

如果要重用组件，只需将其*.jsx文件复制并粘贴到src/components中。这是重复使用组件所需的操作。

admin和admin-client位于同一父目录中

这无关紧要。它们是两个不同的应用程序。

如何从另一个create-react-app项目中本地导入React组件？

这是我尝试过的（但失败了）：

2 个答案: