Запретить использование div как дочерних в PropTypes разрешает только один компонент - PullRequest
Новая
       10

Запретить использование div как дочерних в PropTypes разрешает только один компонент

1 голос
/ 09 января 2020

У меня есть компонент, который клонирует дочерний элемент и передает ему новые реквизиты. В моих PropTypes я хочу разрешить только компонент React, а не что-нибудь еще. Например: 

<PartentComponent>
  <ChildContent/>
</PartentComponent>

Это не всегда будет называться ChildContent, это может быть любое имя для компонента.

Я не хочу, чтобы parentComponent разрешал что-либо, кроме компонента. Это не может быть разрешено. 

<PartentComponent>
  <div>content</div>
</PartentComponent>

Я пытался использовать в своем ParentComponent, используя PropType элемента. но он по-прежнему принимает div 

Modal.propTypes = {
  children: PropTypes.element,
};

Причина, по которой я не хочу ничего, кроме компонента, заключается в том, что я передаю реквизиты в cloneElement, которые нельзя использовать в div. 

  const childComponent = React.Children.map(children, child =>
    cloneElement(child, {
      end: onEndProcesss,
    }));

Ответы [ 2 ]

1 голос
/ 09 января 2020

Вы не можете сделать это с "родным" API PropTypes. Но вы можете создать собственный валидатор. Вы можете развернуть тип компонента из свойства type объектаact.element. https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L118

Если typeof element.type - строка, вам нужно выдать ошибку

Пример проверки типов типов вы можете найти здесь: https://www.ian-thomas.net/custom-proptype-validation-with-react/

0 голосов
/ 09 января 2020

{React.Children.only(this.props.children)}

Проверяет, что у потомков есть только один дочерний элемент (элемент React), и возвращает его. В противном случае этот метод выдает ошибку. 

import React from 'react'

function Modal() {
  return(
    {React.Children.only(this.props.children)}
  )

}

Modal.propTypes = {
  children: PropTypes.element,
};
...