Используя TypeScript с React, нам больше не нужно расширять React.Props
, чтобы компилятор знал, что все реквизиты компонентов компонента могут иметь дочерние элементы:
interface MyProps { }
class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}
Тем не менее, это не похоже на функциональные компоненты без состояния:
const MyStatelessComponent = (props: MyProps) => {
return (
<div>{props.children}</div>
);
};
Выдает ошибку компиляции:
Ошибка: (102, 17) TS2339: свойство 'children' не существует по типу 'MyProps'.
Я предполагаю, что это связано с тем, что компилятор действительно не знает, что в аргументе реквизита будет дана функция ваниль children
.
Итак, вопрос в том, как мы должны использовать детей в функциональном компоненте без состояния в TypeScript?
Я мог бы вернуться к старому способу MyProps extends React.Props
, но интерфейс Props
отмечен как устаревший, а компоненты без гражданства - У меня есть или поддерживаю Props.ref
, насколько я понимаю.
Итак, я могу определить children
prop вручную:
interface MyProps {
children?: React.ReactNode;
}
Во-первых: ReactNode
правильный тип?
Во-вторых: я должен писать дети как необязательные (?
), иначе потребители будут считать, что children
должен быть атрибутом компонента (<MyStatelessComponent children={} />
) и поднять ошибку, если не предоставляется значение.
Кажется, что я чего-то не хватает. Может ли кто-нибудь дать некоторую ясность относительно того, может ли мой последний пример использовать функциональные компоненты без состояния с детьми в React?