解构名称为保留关键字的属性

Question

在使用材质用户界面时，我意识到他们有一个in在转换组件中调用的道具，但是当尝试破坏道具时，我不能，因为in是一个保留关键字。

const MyFade = ({ children, in, ...otherProps }) => { // this gives me an error 
  return (
    <div {...otherProps}>
      <Fade in={in}>{children}</Fade>
    </div>
  );
};

我怎样才能做到这一点？我需要破坏in并且必须otherProps在div.

Answer 1

只需在解构中分配一个新的、非保留的名称即可。

const o = {
   in: 'foo',
   out: 'boo',
};

const { in: inProp } = o;
      // ^^^^ assign new name

console.log(inProp);