JSX元素类型'void'不是JSX元素的构造函数

Question

我在这做错了什么？

它不喜欢我称之为的方式 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.tilte} /> //error
            </Link>
    )}
}

PS谢谢Shubham Khatri将此标记为重复,其中一个问题与我提出的问题不太相似.

Answer 1

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>
  )
}

如果你不这样做,那么Itemsjust返回undefined一个空值,因此

JSX Element type 'void' is not a constructor function for JSX elements"

对于有点更干净的代码,你可以代替{}用()完全:

export const Items = ({icon, title}: LinkedItemProps) => ( 
  <div>
    <div className="nav-menu-link-icon">
      {icon}
    </div>
    <div className="nav-menu-link-label">
      {title}
    </div>
  </div>
)