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> {
   // ...
}

Answer 2

如果您希望组件根据接口接受任何类型的道具，则可以执行以下操作：

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会将您界面的所有道具标记为可选

Answer 3

我认为仅传递两个不同道具的简单方法就是一个干净的解决方案：

interface IProps {
    a: IAProps;
    b: IBProps;
}

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

基于多个Typescript接口进行prop分离

3 个答案: