reactJS中未显示渲染元素错误答案

【问题标题】：Render element error not shown in reactJSreactJS中未显示渲染元素错误
【发布时间】：2021-05-02 03:10:43
【问题描述】：

首先，当我导入功能组件并尝试在 app.js 文件中使用它时，该组件不会被渲染。从图像中，我们可以看到我们导入的标头没有被使用

app.js 文件的代码在这里。

这是我的 app.js 文件代码。

import "./App.css";
import header from "./myComponents/header";
function App() {
  return (
    <>
      <div>hello there</div>
      <header/>
    </>
  );
}

export default App;

这是我运行服务器时的样子。

这是我在 header.js 文件中编写的导航条代码。

import React from "react";

export default function header() {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">
          Todos list
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <a className="nav-link active" aria-current="page" href="#">
                Home
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                About
              </a>
            </li>
          </ul>
          <form className="d-flex">
            <input
              className="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button className="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>
  );
}

【问题讨论】：

自定义组件使用大写字母。使用 Header 而不是 header，因为这已经是标准的 HTML 元素。
考虑阅读他们的文档reactjs.org/docs/components-and-props.html 它有有用的“注释”，涵盖了类似的内容。

标签： javascript reactjs react-native jsx

【解决方案1】：

组件名称必须以大写字母开头，应为<Header/>

来自React official doc

当一个元素类型以小写字母开头时，它指的是一个内置组件，如 or 并产生字符串 'div' 或 'span' 传递给 React.createElement。以大写字母开头的类型比如编译成 React.createElement(Foo) 并对应一个组件在您的 JavaScript 文件中定义或导入。

ref

【讨论】：

【解决方案2】：

In your header.js file add this line at the end and change your filename to Header.js(capital H):

export default Header 像这样：

    import React from "react";

    export default function Header() {
      return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <a className="navbar-brand" href="#">
              Todos list
            </a>
            <button
              className="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#">
                    Home
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">
                    About
                  </a>
                </li>
              </ul>
              <form className="d-flex">
                <input
                  className="form-control me-2"
                  type="search"
                  placeholder="Search"
                  aria-label="Search"
                />
                <button className="btn btn-outline-success" type="submit">
                  Search
                </button>
              </form>
            </div>
          </div>
        </nav>
      );
    }
    export default Header;

 and do these changes in your App.js :

    import "./App.css";  
    import Header from "./myComponents/Header";
    function App() {
      return (
        <>
          <div>hello there</div>
          <Header/>
        </>
      );
    }

    export default App;

【讨论】：

感谢帮我解决问题的朋友