React не может использовать импорт как компонент

Question

Я новичок в React и застрял с проблемой, которую не понимаю ...

Допустим, у меня есть этот компонент, созданный в его собственном файле

import React from 'react';
import {Link} from 'react-router-dom';

const menuBar = () => (
    <div>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/manageUsers">About</Link></li>
        </ul>
        <hr />
    </div>
);

export default menuBar;

Который я использую в файле App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import login from './login';
import manageUsers from './manageUsers';
import menuBar from './menuBar';

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    return (
      <Router>
        <switch>
          <Route exact path="/" component={login} />
          <Route path="/manageUsers" component={manageUsers} />
          <hr />
          <menubar />
        </switch>
      </Router>
    )
  }
}

export default App;

Когда я пытался запустить его, все остальные мои компоненты работали (login и manageUsers), но я не могу показать компонент меню menuBar ...

Я полагаю, что это синтаксическая ошибка, но я не могу ее найти ...

Answer 1

Компонент должен иметь заглавное имя.

// as you have exported as default, you can use any name (not just MenuBar)
// but just care to name it with capitalized first letter.
import Menubar from './menuBar';

<Menubar />

В качестве альтернативы, вы все равно можете использовать имя компонента в нижнем регистре, так как у вас просто есть функциональный компонент, вызовите так:

import menubar from './menuBar'
{menubar()}

Answer 2

Если нет ошибки, это не синтаксическая ошибка.

В JSX пользовательские компоненты должны начинаться с заглавной буквы .menuBar приводит к созданию <menuBar> элемента DOM.

<menuBar/> JSX отключен до React.createElement("menuBar", null).В то время как <MenuBar/> переведен в React.createElement(MenuBar, null).

Так как компонент является экспортом по умолчанию, необходимо изменить только имя импорта:

import MenuBar from './menuBar';

Answer 3

Вы импортируете это так:

import menuBar from './menuBar';

См .: меню B ар.

Но вы используете в качестве меню b ar.

Кроме того, имена компонентов следует начинать с заглавной буквы, например Menubar . См .