React中用于Rest道具的TypeScript工作区

Question

TypeScript 2.1现在支持对象扩展/静止，因此不再需要任何解决方法！

TypeScript支持JSX扩展属性，该属性通常用于React，以将HTML属性从组件传递到呈现的HTML元素：

interface LinkProps extends React.HTMLAttributes {
  textToDisplay: string;
}

class Link extends React.Component<LinkProps, {}> {
  public render():JSX.Element {
    return (
      <a {...this.props}>{this.props.textToDisplay}</a>
    );
  }
}

<Link textToDisplay="Search" href="http://google.com" />

但是，如果您向超文本标记语言元素传递任何未知的道具，React会引入警告。上面的例子会产生一个React运行时警告，text ToDisplay是的未知道具。

const {textToDisplay, ...htmlProps} = this.props;
return (
  <a {...htmlProps}>{textToDisplay}</a>
);

但是TypeScript还不支持这种语法。我知道，希望有一天我们能用打字脚本完成这项工作 （更新：TS 2.1现在支持对象扩展/Rest！为什么你还在读这个？？）在此期间，有哪些变通办法？我正在寻找一种不会影响类型安全性的解决方案，并发现它异常困难。例如，我可以这样做：

const customProps = ["textDoDisplay", "otherCustomProp", "etc"];
const htmlProps:HTMLAttributes = Object.assign({}, this.props);
customProps.forEach(prop => delete htmlProps[prop]);

但这需要使用字符串属性名，而这些属性名不会根据实际的道具进行验证，因此容易出现拼写错误和糟糕的IDE支持。有没有更好的办法？




Answer 1

使用... rest

type ButtonProps = {
    disabled: boolean;
};

function Button(props: ButtonProps): JSX.Element {
    const {disabled = false, ...rest} = props;
...
return (
    <button disabled={disabled} {...rest}>
....

Answer 2

您可能无法避免使用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;
    }
}

使用需要与LinkProps匹配的LinkPropsKeys对象将帮助您保持界面和运行时查找之间的键同步。

Answer 3

这实际上比上面所有的答案都简单。您只需遵循以下示例：

type Props = {
  id: number,
  name: string;
  // All other props
  [x:string]: any;
}

const MyComponent:React.FC<Props> = props => {
  // Any property passed to the component will be accessible here
}

希望这有帮助。