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;

当我尝试运行该程序时，我所有其他组件均正常工作（登录和manageUsers），但我无法显示组件menuBar ...

我想这可能是语法错误，但我找不到...

Answer 1

您正在这样导入它：

import menuBar from './menuBar';

请参阅：菜单 B ar。

但是您使用的是菜单 b ar。

此外，您的组件名称应以大写字母开头，例如菜单栏。 See。

Answer 2

组件应为大写名称。

// 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 3

如果没有错误，则不是语法错误。

在JSX中，user components should be capitalized。 menuBar会创建<menuBar> DOM元素。

<menuBar/> JSX被减为React.createElement("menuBar", null)。 <MenuBar/>被减为React.createElement(MenuBar, null)。

由于该组件是默认导出，因此仅需要更改导入名称：

import MenuBar from './menuBar';

React不能使用import作为组件

3 个答案: