javascript - TypeScript中的React StatelessComponent的DefaultProps

This question already has answers here:

How to define defaultProps for a stateless react component in typescript?

(2个答案)


4年前关闭。




我想在带有defaultProps的 typescript 中使用无状态组件的反应。

我无法找到解决方案，如何使用允许我使用 defaultProps的 defaultProps ，而不使用菱形语法的 TypeScript 项目。

import {Link} from "react-router";

interface LinkProps {
    ...
}

const LinkPresenter = (props: LinkProps): JSX.Element =>
    <Link
        ...
    >
        ...
    </Link>;

LinkPresenter.defaultProps = { // !!! unresolved variable defaultProps
    ...
};

最佳答案

键入 React.SFC 允许附加 defaultProps 以响应无状态组件。

在下面，您可以找到的简化示例React.SFC 和 defaultProps 。

import {Link} from "react-router";

interface LinkProps {
    to?: HistoryModule.LocationDescriptorObject;
    onClick?: (event: React.FormEvent) => void;
    children?: React.ReactNode;
}

const LinkPresenter: React.SFC = (props: LinkProps): JSX.Element =>
    <Link
        className="link"
        to={props.to}
        onClick={props.onClick}
    >
        {props.children}
    </Link>;

// Alternative syntax
const LinkPresenter: React.StatelessComponent = (props: LinkProps): JSX.Element =>
...

LinkPresenter.defaultProps = { // now we can use defaultProps
    to: {
        pathname: `/homepage`,
        query: {
            default: 'someDefault'
        }
    },
    onClick: () => {},
    children: <span>Hello world</span>,
};