Spread Operatorで特定のpropsを取り出す方法

すごく使える方法なのによく忘れてしまうのでメモしておく

interface ExampleProps {
  bar: string;
  foo: number;
  hoge: string;
}
const Example: React.FunctionComponent<ExampleProps> = (props: ExampleProps): JSX.Element => {
  const {bar, ...otherProps} = props;
  // otherPropsにはfooとhogeのみが含まれている
  return (
    <Foo {...otherProps}>
      <Bar bar={bar} />
    </Foo>
  );
}

特定のpropsを取得したい時にも使えるし、逆に特定のpropsを取り除きたい時にも使える方法。

関連記事