Question

我使用create-react-app React创建了一个新应用，一些应用可以重复使用相同的组件所以我创建了一个像这样的结构

- App1
- App2
- App3
- Utils
  - Components

当我尝试从应用程序中加载Utils / Components时，它首先给了我You may need an appropriate loader to handle this file type. - 错误。我已将文件类型从.js更改为.jsx，现在它给了我以下错误

Uncaught DOMException: Failed to execute 'createElement' on 'Document': 
The tag name provided ('/static/media/TeamSidebar.2e3fe8e5.jsx') is not 
a valid name.

的package.json：

{
    "dependencies": {
        "bootstrap": "^4.0.0-beta",
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "react-moment": "^0.6.5",
        "react-scripts": "1.0.14",
        "reactstrap": "^5.0.0-alpha.3",
        "utils": "file:../utils"
 },

App.js

import React, {Component} from 'react';
import {Components} from 'utils';

class App extends Component {
    render() {
        const {TeamSidebar} = Components;

        return (
            <TeamSidebar teams={teamsList}/>
        );
    }
}

Answer 1

默认情况下，Create-React-App的项目应如下所示：

 my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

src 文件夹包含构成应用程序的所有特定组件。在您的情况下，您必须将所有文件/文件夹放在 src 文件夹中，如下所示：

尝试像这样导入：

   src/
    -App1
    -App2
    -App3
    -Utils
     -Components ex:(User.js)
    ...
    ...

如果您想导入来自 Utils 的任何文件，您可以通过以下方式执行此操作：

import NameYourFile '../Utils/WhatEverFile';

希望它有所帮助！

create-react-app组件位于不同于项目错误的文件夹中

1 个答案: