Как проверить состав компонента / "базовый"-компонент / визуализированный корневой компонент в React?
Общеизвестно, что когда мы хотим "расширить" <Component>
в React мы на самом деле не расширяем его класс с помощью наследования, а используем композицию для его визуализации с помощью пользовательских props
внутри нашего "производного" компонента, вот так:
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' />);
}
}
Так что это создаст новый тип компонента <DerivedComponent>
, который по-прежнему будет делать регулярный <Component>
, но с пользовательскими значениями, указанными через props
,
Мой вопрос, есть ли способ подтвердить это <DerivedComponent>
на самом деле оказывает <Component>
в качестве его корневого компонента / что он "выведен" в этом смысле из <Component>
?
Я спрашиваю, потому что я разрабатываю компонент листинга, который будет визуализировать компоненты списка в разных типах списка, но даже если эти компоненты списка будут разных типов, каждый из них будет фактически отображать один и тот же корневой компонент, просто настроенный с помощью разные props
, Я хотел бы обеспечить, через propTypes
или подобное, что children
переданные в компонент листинга фактически основаны на этом обычном компоненте, отображаемом в корне.
Если бы React использовал классическое наследование, было бы просто проверить, является ли каждый экземпляр элемента списка также экземпляром этого общего компонента; однако я не верю, что в React есть API для запроса корневого компонента композиции.
Есть ли какой-то способ в React для обеспечения того, чтобы children
основаны на конкретном компоненте с визуализацией корня?