как сделать правильные реквизиты по умолчанию для отдельных объектов

#javascript #reactjs #typescript #default #react-props

Вопрос:

У меня есть этот код:

   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, а не все остальные ( используйте их значения по умолчанию).

Комментарии:

1. Разве это не должно сработать? Я действительно не вижу здесь проблемы. Вы указали значения по умолчанию, поэтому вы должны быть в порядке, делая это так, как вы это делаете. Что именно происходит не так?

2. @Gh05d текущая реализация перезапишет все SchemaModalProps , а не только предоставленное свойство. Так что с setup({isOpen:false}) SchemaModalProps.onClose , SchemaModalProps.row , и т. Д. Будет undefined

Ответ №1:

Вы можете уничтожить объект props и объявить функцию, как показано ниже:

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

Теперь setup({isOpen:false}) будет переопределено только свойство isOpen.

Комментарии:

1. Похоже, это не работает: typescriptlang.org/play? #код/…

2. да, но обратите внимание, что я использую … реквизит внутри обертки, как это будет работать?

3. Вы должны сделать все свойства необязательными SchemaModalProps .

4. Это должно сработать.

5. Если свойство in SchemaModalProps не является необязательным, вам необходимо передать все необходимые параметры, иначе это приведет к ошибке.

Ответ №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;
};
 

Комментарии:

1. umm SchemaModalProps-это тип, а не сам объект.

Ответ №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;
  };