Question

我正在尝试使用以下道具输入现有的React Native模块：

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

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

通过以下实现

{{1}}

我具有组件1和2的接口，但是我不能同时扩展两者，因为道具是由使用哪个组件决定的。

是否可以动态扩展接口？

如果没有，是否还有其他解决方案？

Answer 1

可以有交集/联合类型：

interface Component1Props { .... }
interface Component2Props { .... }
interface WrapperOwnProps {
  useComponent1: boolean
  useComponent2: boolean
}
type WrapperProps = WrapperOwnProps & (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}/>
    }
  }
}

Typescript-动态扩展接口

1 个答案: