TypeScript 的 React Arrow 组件的类型是什么？

Question

Component File

// Component A

import React, { ReactElement } from "react";

export const BacklogItemDashboard = (): ReactElement => (
    <h1>Backlog Item Dashboard</h1>
);

Use Component File

import // component

interface IMenuInfo {
    choice: string;
  **component: ReactElement;**  
    destination: string;
}

export const BacklogItem = (): ReactElement => {
    const menuInfo: IMenuInfo[] = [
        {
            choice: "Dashboard",
        **component: BacklogItemDashboard,**  // Red squigglies.
            destination: "dashboard".toLowerCase().replace(/ /g, ""),
        },
        ... [more menus deleted for brevity]
   ]

    const routes = menuInfo.map((info: IMenuInfo, key: number) => {
        return (
            <div key={key}>
                <Route
                    path={`${path}/${info.destination}`}
                    **component={info.component}** // another red squiggly
                />
            </div>
        );
    });

    return (
        <div>
            <ServiceItemContent
                menu={
                    <ServiceItemMenu
                        service="Backlog"
                        id={id}
                        choices={menuInfo}
                    />
                }
            >
                {routes}
            </ServiceItemContent>
        </div>
    );
};

Question: What type should "component" have in the interface definition to get rid of the two red squigglies? Tried ReactNode as well but still red squiggles. Tried also Component but the same.

New to programming. New to React. New to JavaScript. Have dream application trying to make it happen. Head hurts from no-understand/luck Google and beating head against wall.

Just need a quick fix--other than unknown or any--and if you have them links to SO posts that I'll study over the weekend since I'm sure this is basic enough to have been asked and answered already. Did I give enough code to understand the problem? Thanks.

Note: I specifically don't want to use React.FC due to this and similar articles: https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/ .

Jason

Answer 1

BacklogItemDashboard is a function that returns a ReactElement . It is not a ReactElement itself.

Any of the following types describe a component which fixes your errors. Meaning that BacklogItemDashboard is assignable to this type and this type is assignable to the component prop of the Route component.

• () => ReactElement - a function which takes no argument and returns a React element.

• () => ReactElement | null () => ReactElement | null - a function which takes no argument and returns a React element or null.

• React.FC - a function which takes no arguments except children and returns a React element or null.

• React.ComponentType - a function component or class component that takes no arguments except maybe children

• React.FC<RouteComponentProps> - a function component that takes the props provided by the Route

• React.ComponentType<RouteComponentProps> - a function component or class component that takes the props provided by the Router

I actually agree with the general premise of the "Why I Don't Use React.FC" article that you should type function arguments rather than the functions themselves when writing the function .I don't think that applies when you are talking about declaring the type for a prop which is a function, like component . I don't see any problem with using React.FC here. You don't need to change the type of BacklogItemDashboard as () => ReactElement is assignable to React.FC . But if you are opposed, you can go with () => ReactElement .