const Test: React.FC = () => (
<Parent>
<Child />
</Parent>
);
const Parent: React.FC = ({ children }) => {
const onClose = () => {
console.log('onClose');
};
return (
<div>
{React.Children.map(children, child => {
if (React.isValidElement(child)) {
return React.cloneElement(child, { ...child.props, onClose });
}
})}
</div>
);
};
const Child: React.FC<{ onClose: () => void }> = props => {
return <div />;
};
Есть очевидная ошибка:
TS2741: Property 'onClose' is missing in type '{}' but required in type '{ onClose: () => void; }'
TypeScript требует добавить свойство onClose
к <Child/>
. Родительский компонент передает свойство, используя React.cloneElement
.
Можно ли решить проблему без использования «рендеринга»? Как мы можем набрать const Parent: React.FC<>
?