TypeScript 中 React StatelessComponent 的 DefaultProps [重复]答案

【问题标题】：DefaultProps for React StatelessComponent in TypeScript [duplicate]TypeScript 中 React StatelessComponent 的 DefaultProps [重复]
【发布时间】：2017-01-24 11:16:56
【问题描述】：

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

我无法找到解决方案如何使用类型，让我可以在 TypeScript 项目中使用 defaultProps 而无需菱形语法。

import {Link} from "react-router";

interface LinkProps {
    ...
}

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

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

【问题讨论】：

感谢链接我找不到任何有用的东西。

标签： javascript reactjs typescript typescript1.8 typescript-typings

【解决方案1】：

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

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

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>,
};

【讨论】：

但是你不需要使用 typescript 来做这个，你可以在方法签名中设置默认的 props 即 const LinkPresenter: React.SFC = (props: LinkProps = {to: {pathname:' ',query}}): JSX.Element
@RossScott 这是一个有趣的想法，虽然我猜它只允许您指定整个道具对象，而不是特定的默认属性。
@RossScott：我是打字稿的新手，我喜欢你建议的语法。
您可以传入多个属性，每个属性都有自己的默认值。您还可以将函数外部的默认值定义为变量，然后对其进行赋值。
这似乎对我不起作用：stackblitz.com/edit/react-ts-ufek81

【解决方案2】：

只是为了扩展我们的对话，这里是使用 TS / ES6 默认属性方法的替代方法：

import {Link} from "react-router";

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

let defaultProps : LinkProps = {
  to: {
        pathname: `/homepage`,
        query: {
            default: 'someDefault'
        }
  },
  onClick: () => {},
  children: <span>Hello world</span>
}

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

【讨论】：

您的解决方案对嵌套对象和未定义值的键的工作方式不同。
如果使用 undefined as props 调用此语法，将返回未定义的 props。 defaultProps 方法可以附加默认道具。
如果你解构了组件 props，这将如何工作？