× 错误: Header(...): 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Posted 2023-02-22

【中文标题】× 错误: Header(...): 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

【英文标题】：× Error: Header(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

【发布时间】：2022-01-12 15:21:08

【问题描述】：

我的代码中有这个错误：错误：标题（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

我正在创建我的源代码树，但我不明白为什么会出现此错误。导入应该是正确的。

有人可以帮我吗？ 提前致谢

App.js

import './App.css';
import Home from './Components/Views/Home/Home';

function App() 
  return (
    <>
      <Home/>
    </>
  );


export default App;

Home.js

import Header from "../../UI/Header/Header";

export default function Home() 
  return <Header />;

Header.js

import "./Header.css";
// import  classes  from "./Header.css";

export default function Header()  
    <header>
        <div className="overlay"></div>
        <video playsInline="playsinline" autoPlay="autoplay" muted loop>
        <source 
            src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" 
            type="video/mp4"/>
        </video>

        /* <div className=classes.container + "h-100"> */
        <div className="container h-100">
            <div className="d-flex h-100 text-center align-items-center">
            <div className="w-100 text-white">
                <h1 className="display-3">Video Header</h1>
                <p className="lead mb-0">Using html5 Video and Bootstrap</p>
            </div>
            </div>
        </div>
    </header>

魔法树

src
|_ Components
|  |_UI
|    |_Header
|      |_Header.js
|
|_ Views
|  |_Home.js
|
|_ App.js

【问题讨论】：

没有返回：export default function Header()

嗨@ŹmicierJaraševič 你能更好地解释一下自己吗？对不起，我不明白

【参考方案1】：

我错过了 Header.js 的回报

import "./Header.css";
// import  classes  from "./Header.css";

export default function Header()  
    return (
        <header>
            <div className="overlay"></div>
            <video playsInline="playsinline" autoPlay="autoplay" muted loop>
            <source 
                src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" 
                type="video/mp4"/>
            </video>

            /* <div className=classes.container + "h-100"> */
            <div className="container h-100">
                <div className="d-flex h-100 text-center align-items-center">
                <div className="w-100 text-white">
                    <h1 className="display-3">Video Header</h1>
                    <p className="lead mb-0">Using HTML5 Video and Bootstrap</p>
                </div>
                </div>
            </div>
        </header>
    );