组件应该返回一个 JSX.元素，但表示它根本不返回值

有问题的组件是这样的：

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => {
props.map((item, index) => {
return <a href={item.href} key={index}>{item.name}</a>
})
};
export default NavigationItems;

哪个生成此错误：

ERROR in src/components/navigation/NavigationItems.tsx:1:66
TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.
> 1 | const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => {
|                                                                  ^^^^^^^^^^^
2 |   props.map((item, index) => {
3 |     return <a href={item.href} key={index}>{item.name}</a>
4 |   })

我尝试过：

return props.map((item, index) => {
<a href={item.href} key={index}>{item.name}</a>
})

然后导致：

ERROR in src/components/navigation/NavigationItems.tsx:2:3
TS2739: Type 'void[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key

还尝试过：

return props.map((item, index) => {
return <a href={item.href} key={index}>{item.name}</a>
})

这导致：

ERROR in src/components/navigation/NavigationItems.tsx:2:3
TS2739: Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>

所以我不太确定这里发生了什么。

有什么建议吗？

数据集：

{
"navbar": {
"navBrand": "My Name",
"navItems": [
{
"name": "Bio",
"href": "#bio"
},
{
"name": "Projects",
"href": "#projects"
},
{
"name": "Articles",
"href": "#articles"
},
{
"name": "Resume",
"href": "#resume"
},
{
"name": "Contact",
"href": "#contact"
}
]
}
}

父组件：

// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';
// Component imports
import NavigationItems from './NavigationItems';
// Import data
import data from '../../data/data.json';
const Navigation = () => {
return (
<Navbar>
<Container>
<Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
<NavigationItems {...data.navbar.navItems} />
</Container>
</Navbar>
);
};
export default Navigation;

执行以下操作：

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
<>
props.map((item, index) => {
return <a href={item.href} key={index}>{item.name}</a>
})
</>
);

结果：

ERROR in src/components/navigation/NavigationItems.tsx
Line 5:27:  Parsing error: Unexpected token. Did you mean `{'>'}` or `&gt;`?
webpack 5.65.0 compiled with 2 errors in 131 ms
ERROR in src/components/navigation/NavigationItems.tsx:5:28
TS1382: Unexpected token. Did you mean `{'>'}` or `&gt;`?
3 | const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
4 |   <>
> 5 |   props.map((item, index) => {
|                            ^
6 |     return <a href={item.href} key={index}>{item.name}</a>
7 |   })
8 |   </>
ERROR in src/components/navigation/NavigationItems.tsx:6:5
TS1109: Expression expected.
4 |   <>
5 |   props.map((item, index) => {
> 6 |     return <a href={item.href} key={index}>{item.name}</a>
|     ^^^^^^
7 |   })
8 |   </>
9 | );
ERROR in src/components/navigation/NavigationItems.tsx:6:21
TS2304: Cannot find name 'item'.
4 |   <>
5 |   props.map((item, index) => {
> 6 |     return <a href={item.href} key={index}>{item.name}</a>
|                     ^^^^
7 |   })
8 |   </>
9 | );
ERROR in src/components/navigation/NavigationItems.tsx:6:37
TS2304: Cannot find name 'index'.
4 |   <>
5 |   props.map((item, index) => {
> 6 |     return <a href={item.href} key={index}>{item.name}</a>
|                                     ^^^^^
7 |   })
8 |   </>
9 | );
ERROR in src/components/navigation/NavigationItems.tsx:6:45
TS2304: Cannot find name 'item'.
4 |   <>
5 |   props.map((item, index) => {
> 6 |     return <a href={item.href} key={index}>{item.name}</a>
|                                             ^^^^
7 |   })
8 |   </>
9 | );
ERROR in src/components/navigation/NavigationItems.tsx:7:3
TS1381: Unexpected token. Did you mean `{'}'}` or `&rbrace;`?
5 |   props.map((item, index) => {
6 |     return <a href={item.href} key={index}>{item.name}</a>
>  7 |   })
|   ^
8 |   </>
9 | );
10 |

这是从<NavigationItems {...data.navbar.navItems}传入的props对象的外观：

{0: {name: "Bio", href: "#bio"}, 1: {name: "Projects", href: "#projects"}, 2: {name: "Articles", href: "#articles"}, 3: {name: "Resume", href: "#resume"}, 4: {name: "Contact", href: "#contact"}}

您的第一个示例没有返回任何内容。当您将箭头函数的主体括在大括号中时，例如const myFunc = () => { ...body }你必须明确地把return放进去。您想要的是省略大括号。

但是，这仍然不起作用，因为您将返回数组而不是元素。您可以使用 React 片段，例如：

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
<>
props.map((item, index) => {
return <a href={item.href} key={index}>{item.name}</a>
})
</>
);

我在手机上输入了这个，所以我希望语法是正确的。但<>表示一个片段。您可以在此处阅读更多内容：https://reactjs.org/docs/fragments.html

请注意，<>...</>是<React.Fragment>...</React.Fragment>的简写

我认为您应该返回地图结果。

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => {
// add return here
return props.map((item, index) => {
return <a href={item.href} key={index}>{item.name}</a>
})
};
export default NavigationItems;

或者为了简化(也许)，你可以这样写

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => 
props.map((item, index) => <a href={item.href} key={index}>{item.name}</a>)

在Derek的评论和Matt U的回答的帮助下，我设法让它工作。

它不仅需要在React.Fragment(<></>)内，而且需要在大括号内{}。

父组件：

// Navigation.tsx
// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';
// Component imports
import NavigationItems from './NavigationItems';
// Import data
import data from '../../data/data.json';
const Navigation = () => {
return (
<Navbar>
<Container>
<Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
<NavigationItems {...data.navbar.navItems} />
</Container>
</Navbar>
);
};
export default Navigation;

子组件：

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
<>
{ 
Object.entries(props).map((item, index) => {
return <a href={item[1].href} key={index}>{item[1].name}</a>
})
}
</>
);
export default NavigationItems;

这是原始数据格式：

{
"navbar": {
"navBrand": "My Name",
"navItems": [
{
"name": "Bio",
"href": "#bio"
},
{
"name": "Projects",
"href": "#projects"
},
{
"name": "Articles",
"href": "#articles"
},
{
"name": "Resume",
"href": "#resume"
},
{
"name": "Contact",
"href": "#contact"
}
]
}
}

但实际上通过<NavigationItems {...data.navbar.navItems} />传递给props的是：

{0: {name: "Bio", href: "#bio"}, 1: {name: "Projects", href: "#projects"}, 2: {name: "Articles", href: "#articles"}, 3: {name: "Resume", href: "#resume"}, 4: {name: "Contact", href: "#contact"}}

所以需要使用Object.entries(props).map().

相关内容

最新更新

热门标签：