оператор импорта не работает в коде JavaScript

#javascript #reactjs

#javascript #reactjs

Вопрос:

Здравствуйте, я новый программист, недавно я начал кодировать в react, но у меня возникла эта проблема с моим кодом JavaScript. Импорт не работает.

 import React from 'react';
import './App.css';
import { hello } from '/components/hello.js';

function App() {
  return (
    <div className="App">
      <header>
      <p>
        <hello></hello>
      </p>
      </header>
    </div>
  );
}

export default App;
  

Это мой app.js файл

 import React from 'react';

export default function hello(){
    return <h1>Hello user</h1>;
}
  

Это мой hello.js файл (он находится внутри папки «Мои компоненты»)
Кто-нибудь может сказать мне, почему импорт не работает??

Ответ №1:

Измените это:

     import React from 'react';

    export default function Hello(){
    return <h1>Hello user</h1>;
}
  

К этому:

     import React from 'react';

    export function Hello(){
    return <h1>Hello user</h1>;
}
  

Если вы хотите оставить его в качестве функции по умолчанию, импортируйте его следующим образом:

 import Hello from '/components/Hello.js';
  

Кроме того, рекомендуется использовать имена компонентов с заглавной буквы. <Hello />

Ответ №2:

Попробуйте использовать импорт по умолчанию вместо импорта имени, потому что в вашем hello.js вы настраиваетесь на значение по умолчанию. Также ваш путь для hello.js это правильно? Попробуйте ./hello.js