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

Question

Is there a way in React to separate the props object based on an Typescript interface which extends multiple other interfaces? The other way I see, is to pass duplicate props to components that won't use them which is not the optimal solution.

interface IProps extends IAProps, IBProps {}

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

Answer 1

You can use the & to merge interfaces. Such as <ScreenProps extends {} & SliderProps & ReactNavigationProps>

Example:

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

if you want your component to accept any type of props based on interfaces you can do this:

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

Note that : if not your all props are required, you can use the optional props in each interface as the following:

interface  IAProps {
    name: string; // required
    age?: number; //optional 

}

or if your all interface's pops should be marked as required but you still want to not use all of them in your component you can do this:

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

something to mention, that Partial will mark all your interface's props as optional

Answer 3

I think the simple approach of just passing two different props is a clean solution:

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

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