Como validar a composição do componente / componente “base” / componente raiz renderizado no React?

É do conhecimento geral que quando queremos "estender" um<Component> no React, na verdade, não estendemos sua classe por herança, mas usamos a composição para renderizá-la com customprops dentro do nosso componente "derivado", assim:

class Component extends React.Component {
  render() {
    return (<div className={ this.props.special_prop }>
              I'm a component!
            </div>);
  }
}

class DerivedComponent extends React.Component {
  render() {
    return (<Component special_prop='custom value' />);
  }
}

Então, isso criará um novo tipo de componente<DerivedComponent>, que ainda processará regularmente<Component>, mas com valores personalizados especificados porprops.

Minha pergunta é: existe alguma maneira de validar isso<DerivedComponent> na verdade torna um<Component> como seu componente raiz / que é "derivado" nesse sentido de<Component>?

Estou perguntando, porque estou desenvolvendo um componente de listagem que renderizará componentes de itens de lista de vários tipos em uma lista, mas mesmo que esses componentes de itens de lista sejam tipos diferentes, cada um renderizará o mesmo componente raiz, apenas personalizado com diferenteprops. Eu gostaria de impor, viapropTypes ou similar, que ochildren transmitidos para o componente de listagem são, na verdade, baseados nesse componente renderizado pela raiz comum.

Se o React tivesse usado a herança clássica, seria apenas uma questão trivial verificar se cada instância do item da lista também era uma instância desse componente comum; no entanto, não acredito que o React tenha a API para consultar o componente renderizado pela raiz de uma composição.

Existe alguma maneira no React de impor que ochildren são baseados em um componente renderizado como raiz específico?

questionAnswers(0)

yourAnswerToTheQuestion