TypeScriptのReact StatelessComponentのDefaultProp

Question

typescriptにdefaultPropsを指定してレスポンスステートレスコンポーネントを使用したかったのです。

私は私がダイヤモンドの構文なし活字体プロジェクトにdefaultPropsを使用することができるようになるタイピングを使用する方法解決策を見つけることができないのです。

import {Link} from "react-router"; 

interface LinkProps { 
    ... 
} 

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

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

Answer 1

タイプ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>, 
}; 

Answer 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>;