Каково правильное значение для `defaultProp`, которое соответствует `PropTypes.element`?
У меня есть компонент, который я хочу принять в качестве опоры другого компонента и визуализировать его. Я хочу, чтобы этот переданный компонент был необязательным и в этом случае ничего не отображал.
Следующий код работает отлично:
const Component = ({ Inner }) => (
<div style = {{ borderStyle: "solid" }}>
<Inner />
</div>
);
Component.propTypes = {
Inner: PropTypes.element
};
Component.defaultProps = {
Inner: () => null
};
Однако при первой загрузке страницы prop-types жалуется:
Warning: Failed prop type: Invalid prop
Innerof typefunctionsupplied toComponent, expected a single ReactElement.
Мое текущее решение состоит в том, чтобы переопределить propType как PropTypes.oneOfType([PropTypes.element, PropTypes.func]), но это кажется совершенно неправильным.
Какими должны быть мои propType или defaultProp на самом деле?
Этот вопрос похож на Если proptype элемента, что по умолчанию?, но он принял ответ, который не работает, и даже если бы он работал, это не очень помогло мне, поскольку я действительно использую React Native. Я не сформулировал вопрос таким образом, чтобы реагировать на натив, как я уже сказал, мой пример работает, это просто prop-types большой скупердяй.
Да, второй предлагает рендерить null вручную, что противоположно тому, что я хочу. Третий вообще не работает.
Ответы 1
Использование типа elementType решит вашу проблему.
Component.propTypes = {
Inner: PropTypes.elementType
};
Поскольку ваша поддержка является компонентом реакции, мы используем elementType. Если вы когда-нибудь откроете исходный код для prop-types, вы найдете это там.
Надеюсь, что это полезно для вас.
Чувак, я бы хотел, чтобы это было задокументировано. :/reactjs.org/docs/typechecking-with-proptypes.html#proptypes
Вы пробовали какой-либо из непринятых ответов? Ответ принимается только потому, что он помог ОП, а не потому, что это единственный «правильный» ответ.