React js - 为什么没有导入导航栏组件？

Question

当我在 app.js 中给出部分时它可以工作，但是当它被放入另一个文件 navbar.js 并导入时它显示空白屏幕。如果 navbar.js 中的代码直接添加到 app.js 中而不是导入，则可以正常工作并出现 navbar。否则会出现空白屏幕。

index.js 如下图：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

app.js 文件

import React, { Component } from 'react';
import navbar from './navbar.js';

class home extends Component {
  render() {
    return (
    	<div>
        	<navbar />
        </div>
    );
  }
}
export default home;

navbar.js 文件：

import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';

class navbar extends Component{
  render() {
    return (
      <Navbar collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav>
            <NavItem eventKey={1} href="#">Link</NavItem>
            <NavItem eventKey={2} href="#">Link</NavItem>
          </Nav>
          <Nav pullRight>
            <NavItem eventKey={1} href="#">Link Right</NavItem>
            <NavItem eventKey={2} href="#">Link Right</NavItem>
          </Nav>
        </Navbar.Collapse>
    </Navbar>      
    );
  }
}
export default navbar;

请帮忙，提前谢谢。

Answer 1

您应该始终以自定义 React 组件的名称开头 一个大写字母。

import React, { Component } from 'react';
import Navbar from './Navbar.js';

class Home extends Component {
  render() {
    return (
        <div>
          <Navbar />
        </div>
    );
  }
}
export default Home;

建议文件名也使用相同的名称。所以应该是./Navbar.js 而不是./navbar.js

阅读官方文档中的this page 了解更多信息。

始终以大写字母开头组件名称。例如，<div/> 代表一个 DOM 标签，但 <Welcome /> 代表一个组件，并且 要求Welcome 在范围内。