Question

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

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在范围内。

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

1 个答案: