错误：导航（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Posted 2023-02-22

【中文标题】错误：导航（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

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

【发布时间】：2021-09-07 13:46:34

【问题描述】：

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

我正在创建一个带有样式组件的导航栏，但我不知道如何纠正这个问题...... 以下是我的代码：

Navbar.js

import React from 'react'
import styled from 'styled-components'
import  FcSurvey  from 'react-icons/fc'

const Nav = () => 
    (
        <Wrapper>
            <Logo>
                <FcSurvey />
            </Logo>
            <h1>CV Builder</h1>
        </Wrapper>
    )


const Wrapper = styled.nav`
    display: flex;
    align-items: center;
    padding: 2rem;
    background-color: black;
    color: white;
`;

const Logo = styled.div`
    display: flex;
    margin: 1rem;
    font-size: 4rem;
`;

export default Nav

App.js

import React from 'react'
import Nav from './Components/Navbar'

const App = () => (
  <Nav />
)

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我真的不知道我做错了什么，如果有人可以帮助我，我会非常感激。

【参考方案1】：

您的功能组件应该返回您的 JSX。像这样改变你的导航。

arrow functions 的注意事项：如果您的函数体包含在 中，则必须显式编写返回语句。

const Nav = () => 
   return (
        <Wrapper>
            <Logo>
                <FcSurvey />
            </Logo>
            <h1>CV Builder</h1>
        </Wrapper>
    )

【参考方案2】：

所有的钩子都遵循这个语法

const Nav = () => 
    return(
        <Wrapper />
        /*Your JSX*/
    )


export default Nav