Question

这是我的主页：

import React, {Component} from 'react';
import navBar from './navigationBar';

class Main extends Component {
    render() {
        return (
            <div className="container">
                <navBar/>
            </div>
        );
    }
}
export default Main;

这是navBar组件

import React from 'react';
import {Route, Link} from 'react-router-dom'
import Error from './Error'

class navigationBar extends React.Component  {
    render() {
        return (
            <div className="nav">
                <nav className="navbar navbar-inverse bg-inverse">
                    <ul className="nav navbar-nav">
                        <li className="nav-item">
                            <Link to={"/data"} className="nav-link"> Data </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/analysis"} className="nav-link"> Analysis </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/Monitor"} className="nav-link"> Monitor </Link>
                        </li>
                    </ul>
                </nav>
                <Route path={"/webiks/:user"} component={Error}/>
            </div>
        );
    }
}

export default navigationBar;

由于某种原因，我无法看到navigationBar组件。这个问题与代码或配置有关吗？

谢谢。

Answer 1

navigationBar应该是大写字母 - ＆gt; NavigationBar

所有组件都应使用大写字母。如果组件的字母很小，则会将组件视为标签。

Answer 2

编辑!!

作为@Andrew状态：根本原因是您的班级名称<request-id-header>。将其更改为class navigationBar并正确导出它应该修复它导出默认的NavigationBar;`

class NavigationBar

默认情况下，您使用export default navigationBar;导出。请更新导入：

navigationBar

和

import navigationBar from './navigationBar';

Reactjs看不见的组件

2 个答案: