为什么导航栏不在 DOM 中呈现答案

【问题标题】：Why navbar isnt rendering in DOM为什么导航栏不在 DOM 中呈现
【发布时间】：2020-07-03 23:21:44
【问题描述】：

我一直试图弄清楚为什么我在 jsx 中的导航栏没有在 DOM 中正确呈现。它正下方的 div 呈现，但无论出于何种原因，当我将导航栏称为“nav1”时，它都不会呈现。也许有人会在我的代码中看到一些错误。这可能很明显，但我是新手。

<body>
    <div id="root"></div>


    <script type="text/babel">
        // Obtain the root 
            const rootElement = document.getElementById('root')
        // Create a ES6 class component    
            class nav1 extends React.Component { 
        // Use the render function to return JSX component      
            render() {
            return (
           
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <a className="navbar-brand" href="#">WebSiteName</a>
                        </div>
                        <ul className="nav navbar-nav">
                            <li className="active"><a href="#">Home</a></li>
                            <li><a href="#">Page 1</a></li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                    </div>
                </nav>
        

        );
    }
}
         
// Create a function to wrap up your component
function App(){
  return(
  <div>
    <nav1 />
    <div className="container">
    <h3>Basic Navbar Example</h3>
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
  </div>
  )
}
            

ReactDOM.render(
<App />,
rootElement
)

【问题讨论】：

我认为 react 组件必须大写，所以应该是 nav1 而不是 Nav1

标签： javascript reactjs jsx

【解决方案1】：

哈桑·阿扎姆是对的。使用 JSX 时，自定义 React 组件必须以大写字母开头。引用官方文档：

当元素类型以小写字母开头时，它指代一个内置组件，如<div> 或<span>，并导致将字符串'div' 或'span' 传递给React.createElement。以<Foo /> 之类的大写字母开头的类型编译为React.createElement(Foo)，并对应于您的 JavaScript 文件中定义或导入的组件。

Source

因此，要解决您的问题，请将您的课程从 nav1 重命名为 Nav1。

这是一个工作示例：https://jsfiddle.net/sbxk1g2o/7/

【讨论】：

如此简单，但可以解决它。