用于React中其余道具的TypeScript解决方法

用于React中其余道具的TypeScript解决方法

您可能无法避免使用的属性的子集创建新对象

this.props

，但是可以使用类型安全性来做到这一点。

例如：

interface linkProps {    textToDisplay: string;}const linkPropsKeys: linkProps = { textToDisplay: "" };class link extends React.Component<linkProps & React.HTMLAttributes, {}> {    public render(): JSX.Element {        return ( <a { ...this.getHtmlProps() }>{ this.props.textToDisplay }</a>        );    }    private getHtmlProps(): React.HTMLAttributes {        let htmlProps = {} as React.HTMLAttributes;        for (let key in this.props) { if (!(linkPropsKeys as any)[key]) {     htmlProps[key] = this.props[key]; }        }        return htmlProps;    }}

使用

linkPropsKeys

需要与匹配的object

linkProps

可以帮助您使接口和运行时查找之间的键保持同步。