Question

导入组件时出现此错误

找不到模块：无法解析＆＃39; ../ src / components / Menu＆＃39; in＆＃39; / Users / userName / Documents / folder / repository / Project / src / pages / Home＆＃39;

src
  components
    Menu
      Menu.css
      Menu.js
  pages
    Home.css
    Home.js

Menu.js

import React, { Component } from 'react';
import './Menu.css';

class Menu extends Component {
  render() {
    return (
      <div className="menu">
        <h1>Je suis un Menu</h1>
      </div>
    );
  }
}

export default Menu;

Home.js

import React, { Component } from 'react';
import './Home.css';
import Menu from './../components/Menu';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: 'Hello from the state of Home'
    }
  }

  render() {
    return (
      <div className="home">
        <h1 className="text">Welcome to the Home Page</h1>
        <p>{this.state.msg}</p>
        <Menu/>
      </div>
    );
  }
}

export default Home;

Answer 1

您需要从更深层次导入：

import Menu from './../components/Menu/Menu';

您有一个名为Menu的文件夹，您想要的文件名为Menu.js。

Answer 2

那是因为'../src/components/Menu'没有指向您的文件。

使用路径

'../src/components/Menu/Menu'

或，如果您想使用原始路径，请将Menu.js文件重命名为index.js。

根据我的经验，后者往往更受欢迎，因为它是inclusion in the hugely useful Airbnb JSX style guide。

错误导入组件

2 个答案: