javascript JSX 元素类型“void”不是 JSX 元素的构造函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48369599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSX Element type 'void' is not a constructor function for JSX elements
提问by Hafiz Temuri
What am I doing wrong here?
我在这里做错了什么？
It doesn't like the way I am calling Items
它不喜欢我打电话的方式 Items
import React, { Component } from 'react';
import { Link } from "react-router-dom";
interface LinkedItemProps {
icon: string;
title: string;
}
export const Items = ({icon, title}: LinkedItemProps) => {
<div>
<div className="nav-menu-link-icon">
{icon}
</div>
<div className="nav-menu-link-label">
{title}
</div>
</div>
}
export default class LinkedItems extends React.Component<any, any> {
render() {
return (
<Link
to={this.props.link}
title={this.props.title}
onClick={this.props.afterClick}
>
<Items icon={this.props.icon} title={this.props.title} /> //error
</Link>
)}
}
P.S. Thank you Shubham Khatrifor marking this as a duplicate of a question that does not remotely resemble what I asked.
PS 感谢Shubham Khatri将其标记为与我提出的问题完全不同的问题的重复。
回答by nem035
Itemsis an arrow function with {}which means you have to explicitly give it a returnstatement:
Items是一个箭头函数，{}这意味着你必须明确地给它一个return声明：
export const Items = ({icon, title}: LinkedItemProps) => {
return ( // <------ must return here
<div>
<div className="nav-menu-link-icon">
{icon}
</div>
<div className="nav-menu-link-label">
{title}
</div>
</div>
)
}
If you do not, then the Itemsjust returns undefinedwhich is an empty value and thus
如果不这样做，Items则只返回undefined一个空值，因此
JSX Element type 'void' is not a constructor function for JSX elements"
For a bit cleaner code, you can replace the {}with ()completely:
对于有点更干净的代码，你可以代替{}用()完全：
export const Items = ({icon, title}: LinkedItemProps) => (
<div>
<div className="nav-menu-link-icon">
{icon}
</div>
<div className="nav-menu-link-label">
{title}
</div>
</div>
)
