javascript - DefaultProps สำหรับ React StatelessComponent ใน TypeScript

ฉันต้องการใช้คอมโพเนนต์แบบ Stateless ของ React ใน TypeScript พร้อมกับ defaultProps

ฉันไม่สามารถหาวิธีแก้ปัญหาในการใช้ typings ที่จะอนุญาตให้ฉันใช้ defaultProps ในโครงการ TypeScript โดยไม่ใช้ syntax แบบ diamond ได้

import {Link} from "react-router";

interface LinkProps {
    ...
}

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

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

คำตอบ #1

ประเภท React.SFC อนุญาตให้แนบ defaultProps กับคอมโพเนนต์ไร้สเตทของ React

ด้านล่างคุณสามารถดูตัวอย่างที่เรียบง่ายของ 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>,
};

คำตอบ #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>;