考虑下面的react代码：（codesandbox）
import type { ReactNode } from 'react';
type RenderCallbackProps = {
children: (o: { a: number }) => ReactNode,
};
function RenderCallback({ children }: RenderCallbackProps) {
return (children({ a: 123 }));
}
export default function App() {
return (
<RenderCallback>
{({ a }) => (
<h1>{a}</h1>
)}
</RenderCallback>
);
}这将导致出现以下错误消息：
function RenderCallback({ children }: RenderCallbackProps): ReactNode
'RenderCallback' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.ts(2786)为什么？undefined从何而来？
怎么解决呢？
1条答案
按热度按时间b4lqfgs41#
undefined从何而来？这就是
ReactNode的部分含义。ReactNode是：ReactChild | ReactFragment | ReactPortal | boolean | null | undefined，或者基本上所有可以合法地作为<div>的子项的内容。但是，虽然可以将undefined作为div的子项，但它不能是组件返回的唯一内容，因此，当尝试执行return (children({ a: 123 }));时，会出现错误有两种方法可以解决这个问题。如果你想继续允许null/undefined/boolean等传入，那么只要确保RenderCallback总是将其 Package 在一个元素中。一个片段就足够了：
或者如果你不想允许这些值，那么你可以改变回调函数的类型，例如只允许元素：