如何使用单个对象制作适当的默认道具

Question

我有这个代码：

  const setup = (props: SchemaModalProps = { isOpen: false, onClose: () => { }, row: {}, onSchemaChange: () => { }, updateSchema: () => { }, hasPermission: false }) => {
    const wrapper: any = mount(<SchemaModal {...props} />);
    const driver = new SchemaModalDriver(wrapper);
    return driver;
  };

当我调用设置函数时，我需要像这样指定内部对象项：

 const driver = setup({ isOpen: true, row: someTriggerConfiguration, onClose: () => { }, onSchemaChange: () => { }, updateSchema: () => { }, hasPermission: true });

我怎样才能重写代码，如果我这样做 setup({isOpen:false}) 它只会覆盖 isOpen 而不是其余部分（使用它们的默认值）。

Answer 1

您可以解构 props 对象并声明如下函数：

const setup = ({
  isOpen = false,
  onClose = () => {},
  row = {},
  onSchemaChange = () => {},
  updateSchema = () => {},
  hasPermission = false
}: SchemaModalProps) => {
  /**
   * Your code
   */
  return <></>;
};

现在 setup({isOpen:false}) 只会覆盖 isOpen 属性。

Answer 2

您可以使用Object.assign() 来组合两个对象。这样只有提供的新值才会覆盖默认值。

const setup = (props: SchemaModalProps) =>
{
  SchemaModalProps = Object.assign({
    isOpen: false,
    onClose: () => { },
    row: {},
    onSchemaChange: () => { },
    updateSchema: () => { },
    hasPermission: false
  }, SchemaModalProps || {});
  const wrapper: any = mount(<SchemaModal {...props} />);
  const driver = new SchemaModalDriver(wrapper);
  return driver;
};

Answer 3

根据之前的问题，我发现这个效果最好：

  const setup = ({ isOpen = false, onClose = () => { }, row = {}, onInfoChange = () => { }, hasPermission = false }) => {
    const props: TriggerInfoModalProps = { isOpen, onClose, row, onInfoChange, hasPermission }
    const wrapper: any = mount(<TriggerInfoModal {...props} />);
    const driver = new TriggerInfoModalDriver(wrapper);
    return driver;
  };

如何使用单个对象制作适当的默认道具

how to make proper default props with single objects

javascript

default

typescript

reactjs

react-props