基于多个 Typescript 接口的 React prop 分离

Question

React 中是否有一种方法可以基于扩展多个其他接口的 Typescript 接口来分离 props 对象？我看到的另一种方式是将重复的道具传递给不会使用它们的组件，这不是最佳解决方案。

interface IProps extends IAProps, IBProps {}

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

Answer 1

您可以使用&来合并接口。如<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> {
   // ...
}