Como usted señaló:

MyComponent es un componente "genérico" que representa A si está presente foo o B si está presente bar.

Y su definición es function MyComponent({ foo, bar }) { ... }

Para evitar soluciones complejas, le sugiero que mueva la lógica condicional fuera de MyComponent . De esta forma, necesitará una única definición de propType para MyComponent sin duplicar las definiciones de propType de los otros dos componentes. El tipo que verificará su componente es element , un tipo común compartido por todos los elementos de React.

 MyComponent.propTypes = { elementToRender: PropTypes.element };

Por lo tanto, debe adaptar la definición de su componente:

 function MyComponent({ elementToRender }) { ... }

Y la forma en que se usa:

 const getComponentToRender = (foo, bar) => { if (foo) { return <FirstComponent foo={foo} />; } else if (bar) { return <SecondComponent bar={bar} />; } else { return null; } } const element = getComponentToRender(foo, bar)

Tu jsx:

 {!element && <YourErrorComponent />} {element && <MyComponent elementToRender={element} />}

Siempre puede poner su lógica condicional dentro del componente sin usar una constante o variable, si lo desea.

Beneficios

El mayor beneficio de este enfoque es que su MyComponent no necesita saber nada sobre sus tipos FirstComponent o SecondComponent . Y siempre puede elegir usar otro componente para pasar a MyComponent sin cambiarlo.

Además, tiene un único punto en el código donde se definen los tipos y no tiene dependencias entre ellos.

Además, no obtiene accesorios en un punto y luego los usa en una condición muy alejada.

Una consideración final

Para que su código sea fácil de leer, le sugiero que evite usar un accesorio específico para un elemento. Use props.children en su lugar:

 {element && <MyComponent>{element}</MyComponent>}

Esta es una forma más React-ish ( natural ) de mostrar un componente dentro de otro: los accesorios para children existen para este propósito.

Además, puede poner (nuevamente) una lógica alternativa dentro de MyComponent:

 function MyComponent({ children }) { if (children) { return <div className="container">{children}</div> } return <p>children is missing</> }

Supongo que te refieres a | como en ¿quieres tomar la unión de los dos conjuntos? Simplemente puede fusionar los dos objetos con algo como Object.assign():

 const FirstComponentPropTypes = { foo: PropTypes.any, }; const SecondComponentPropTypes = { bar: PropTypes.any, }; function MyComponent({ foo, bar }) { ... } MyComponent.propTypes = Object.assign({}, SecondComponentPropTypes, FirstComponentProptypes);