Блог

Я пытаюсь ввести существующий модуль React Native со следующими реквизитами:

 useComponent1: boolean
useComponent2: boolean
  

С помощью следующей реализации

 render(){
    if(useComponent1){
        return <Component1 {...props}/>
    }

    if(useComponent2){
        return <Component2 {...props}/>
    }
}
  

У меня есть интерфейс для компонентов 1 и 2, однако я не могу расширить оба, поскольку реквизиты определяются тем, какой компонент используется.

Возможно ли динамически расширять интерфейс?

Если нет, есть ли другое решение этой проблемы?

Может быть тип пересечения / объединения:

 interface Component1Props { .... }
interface Component2Props { .... }
interface WrapperOwnProps {
  useComponent1: boolean
  useComponent2: boolean
}
type WrapperProps = WrapperOwnProps amp; (Component1Props | Component2Props);
  

Тип реквизита может быть дополнительно указан:

 class Wrapper extends Component<WrapperProps> {
  render(){
    const { useComponent1, useComponent2, ...props } = this.props;
    if(useComponent1){
      return <Component1 {...props as Component1Props}/>
    }

    if(useComponent2){
      return <Component2 {...props as Component2Props}/>
    }
  }
}