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

P.S。感谢Shubham Khatri将此标记为重复，其中的问题与我提出的问题不太相似。

Answer 1

self.Images_list[1][2].source是一个带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> ) }只返回Items，这是一个空值，因此

undefined

要获得更清洁的代码，您可以完全将JSX Element type 'void' is not a constructor function for JSX elements"替换为{}：

()

JSX元素类型＆＃39; void＆＃39;不是JSX元素的构造函数

1 个答案: