How to validate component composition / “base”-component / rendered root component in React?

问题

It is common knowledge that when we want to "extend" a <Component> in React, we don't actually extend its class via inheritance, but use composition to render it with custom props inside our "derived" component, like this:

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' />);
  }
}

So this will create a new type of component <DerivedComponent>, which will still render a regular <Component>, but with custom values specified via props.

My question is, is there some way to validate that <DerivedComponent> actually renders a <Component> as its root component / that it is "derived" in that sense from <Component>?

I'm asking because I'm developing a listing component which will render list item components of numerous types in a list, but even though these list item components will be different types, each one will actually render the same root component, just customized with different props. I'd like to enforce, via propTypes or similar, that the children passed to the listing component are actually based on that common root-rendered component.

Had React used classical inheritance, it would just be a trivial matter of checking if each list item instance was also an instance of that common component; however, I do not believe that React has the API to query the root-rendered component of a composition.

Is there some way in React to enforce that the children are based on a specific root-rendered component?

来源：https://stackoverflow.com/questions/42826548/how-to-validate-component-composition-base-component-rendered-root-compone