应为赋值或函数调用，但实际看到的却是表达式.映射组件时出现React JS错误

Question

这是我渲染Navbar:的React代码

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import {Nav,Form,Button,FormControl,NavDropdown} from 'react-bootstrap';
export default function NavigatorHeader(props)
{
return(
<Navbar bg="light" expand="lg" style={{ width: 400 }}>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
{props.Header.map(element=>{
<Nav.Link href={element.href} key={element.id}>{element.title}</Nav.Link>
})}
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

这是我的专业。标题：

Headers:[
{
id:0,
title:"Projects",
href:"#home"
},
{
id:1,
title:"Events",
href:"#home"
},
{
id:2,
title:"Achievements",
href:"#home"
},
{
id:3,
title:"Skillsets",
href:"#home"
},
]

我正试图将其绘制成这样：

<Navbar bg="light" expand="lg" style={{ width: 400 }}>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
{props.Header.map(element=>{
<Nav.Link href={element.href} key={element.id}>{element.title}</Nav.Link>
})}
</Nav>
</Navbar.Collapse>
</Navbar>

我得到以下错误：；应为赋值或函数调用，但实际看到的却是表达式"有人知道我到底错在哪里吗？我想映射并创建多个这样的项目。

Answer 1

您需要在<Nav.Link.

{props.Header.map(element=>{
return <Nav.Link href={element.href} key={element.id}>{element.title}</Nav.Link>
})}