Реагировать на разделение пропов на основе нескольких интерфейсов Typescript - PullRequest
Новая
       44

Реагировать на разделение пропов на основе нескольких интерфейсов Typescript

1 голос
/ 03 мая 2019

Есть ли в React способ отделить объект props на основе интерфейса Typescript, который расширяет несколько других интерфейсов? Другой способ, который я вижу, - передавать дубликаты реквизита компонентам, которые их не используют, что не является оптимальным решением. 

interface IProps extends IAProps, IBProps {}

const Component1: SFC<IProps> = (props) => 
   return (
     <Component2
         {...props} <--- only IAProps
     />
     <Component3
         {...props} <--- only IBProps
     />
  );
}

Ответы [ 2 ]

2 голосов
/ 03 мая 2019

Вы можете использовать & для объединения интерфейсов. Такие как <ScreenProps extends {} & SliderProps & ReactNavigationProps>

Пример: 


interface AProps {
  testa: any
}

interface BProps {
  testb: any
}


class Test extends Component<AProps & BProps> {
  // ...
}


// or


<IProps extends AProps & BProps>

class Test extends Component<IProps> {
   // ...
}
0 голосов
/ 03 мая 2019

если вы хотите, чтобы ваш компонент принимал какие-либо реквизиты на основе интерфейсов, вы можете сделать это: 

const Component1: SFC<IAProps & IBProps> = (props) => 
       return (
         <Component2
             {...props} <---IAProps
         />
         <Component3
             {...props} <--- IBProps
         />
      );
    }

Обратите внимание: : если требуются не все реквизиты, вы можете использовать дополнительные реквизиты в каждом интерфейсе следующим образом: 

interface  IAProps {
    name: string; // required
    age?: number; //optional 

}

или если всплывающие окна всех ваших интерфейсов должны быть помечены как необходимые, но вы все равно хотите не использовать их все в своем компоненте, вы можете сделать это: 

const Component1: SFC<Partial<IAProps> & Partial<IBProps>> = (props) => 
       return (
         <Component2
             {...props} <---IAProps
         />
         <Component3
             {...props} <--- IBProps
         />
      );
    }

что стоит упомянуть, Partial пометит все реквизиты вашего интерфейса как необязательные

...