reactjs - React 中 rest Prop 的 TypeScript 解决方法

Question

针对 TypeScript 2.1 进行了更新

TypeScript 2.1 now supports object spread/rest ，因此不再需要解决方法!

---

原始问题

TypeScript 支持 JSX spread attributes在 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 引入了一个 warning if you pass any unknown props to an HTML element .上面的例子会产生一个 React 运行时警告 textToDisplay是 <a> 的未知 Prop .对于像这个例子这样的情况，建议的解决方案是使用 object rest properties提取您的自定义 Prop 并将其余部分用于 JSX 传播属性:

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

但是 TypeScript 还不支持这种语法。我知道希望有一天 we will be able to do this in TypeScript .(更新:TS 2.1 now supports object spread/rest!你为什么还在读这个？？)与此同时有哪些解决方法？我正在寻找一种不会损害类型安全的解决方案，但发现它出奇地困难。例如我可以这样做:

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

但这需要使用未针对实际 Prop 进行验证的字符串属性名称，因此容易出现拼写错误和糟糕的 IDE 支持。有没有更好的方法可以做到这一点？

Answer 1

它实际上比上面所有的答案都容易。你只需要按照下面的例子:

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
}