TypeScript中的React StatelessComponent的DefaultProps

我想在默认步骤中使用typescript中的reactless stateless组件。TypeScript中的React StatelessComponent的DefaultProps

我无法找到解决方案如何使用分型，将允许我使用defaultProps在打字稿项目没有钻石的语法。

import {Link} from "react-router"; 

interface LinkProps { 
    ... 
} 

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

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

来源

2016-09-16 Marcel Mandatory

感谢链接，我无法找到任何有用的。 –

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

来源

2016-09-16 09:21:38

但你不需要使用typescript来做这件事，你可以在方法签名中设置默认的道具，例如const LinkPresenter：React.SFC =（props：LinkProps = {to：{pathname：''，query}}）： JSX.Element –

@RossScott这是一个有趣的想法，但我想它只允许您指定整个道具对象，而不是特定的默认属性。 –

@RossScott：我对打字稿很陌生我喜欢你所建议的语法。 –

只是为了我们的谈话展开，这里是一个使用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>;

来源

2016-09-16 10:46:40

您的解决方案与嵌套对象和具有未定义值的键的工作方式不同。 –

如果使用undefined作为道具调用此语法将返回未定义的道具。 defaultProps方法将工作附加默认道具。 –

TypeScript中的React StatelessComponent的DefaultProps

回答

相关问题