reactjs - 基于多个 Typescript 接口(interface)的 React prop 分离

Question

在 React 中有没有一种方法可以根据扩展多个其他接口(interface)的 Typescript 接口(interface)来分离 props 对象？我看到的另一种方法是将重复的 Prop 传递给不会使用它们的组件，这不是最佳解决方案。

interface IProps extends IAProps, IBProps {}

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

Answer 1

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