我可以删除反应中的道具吗

Question

我只想知道是否可以从组件中安全地删除反应组件道具。

有没有function之类的

this.destroyProps({someProp})

Answer 1

不，你不能。 react 组件的 props 是不可变的，不应被组件更改。

如果您需要在本地处理数据，您可以使用组件的状态，或者更好地创建 prop 数据的本地副本。

Answer 2

如果您将道具传递给子组件，您可以创建一个新对象，从中删除属性，然后传递给子组件。

const childProps = { ...this.props };
delete childProps.someProp;
return (
  <ChildComponent {...childProps} />
)

Answer 3

为什么不解构已删除的道具，然后您可以使用其余的道具？

const {someProp, ...rest} = this.props;
return (
    <ChildComponent {...rest} />
);

但实际上，这里的问题是你为什么要传入someProp开始。

Answer 4

Typescript 救援

使用Omit （在 TS 3.5 中添加）您可以扩展现有组件，删除不需要的道具。

用法：

interface Original {
    foo: string;
    bar: number;
    baz: boolean;
}

// Omit a single property:
type OmitFoo = Omit<Original, "foo">; // Equivalent to: {bar: number, baz: boolean}

// Or, to omit multiple properties:
type OmitFooAndBar = Omit<Original, "foo" | "bar">; // Equivalent to: {baz: boolean}

我们可以结合Omit和Extends来创建一个新的界面，我们可以添加额外的道具来喜欢这样。

例子：

假设我们要基于 3rd 方库中的按钮组件创建一个按钮组件，但删除一些道具。

import {
  Button as ThirdPartyButton,
  ButtonProps as ThirdPartyButtonProps,
} from '<SOME-THIRD-PARTY-LIBRARY>';

export interface ButtonProps extends Omit<ThirdPartyButtonProps, 'someProperty'> {
  /**
   * The content of the component.
   */
  children: React.ReactNode;
}

/**
 * Button Component
 */
const Button = ({ children, ...otherProps }: ButtonProps): JSX.Element => (
  <ThirdPartyButton {...otherProps}>{children}</ThirdPartyButton>
);

export default Button;