Как проверить состав компонента / "базовый"-компонент / визуализированный корневой компонент в 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 основаны на конкретном компоненте с визуализацией корня?

0 ответов

Другие вопросы по тегам