Question

我的代码中有这个错误： 错误：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;

Index.js

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

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

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

Answer 1

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

arrow functions 的注意事项：如果您的函数体包含在 {} 中，您必须明确地编写一个 return 语句。

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

Answer 2

所有钩子都遵循这个语法

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

export default Nav

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

2 个答案: