"use client";
-- Some imports and interfaces
const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
const [data, setData] = useState<SubscriptionData>({});
-- Some functions
return <>{children(data)}</>;
};
export default SubscriptionDataFetcher;
我有这个应用程序需要调用 trpc 路由,我决定这样调用它并将子项返回到服务器组件:
export const dynamic = 'force-dynamic';
--some interfaces
const Packages: React.FC = () => {
<SubscriptionDataFetcher>
{({ x, y }) => (
)}
</SubscriptionDataFetcher>
export default Packages;
我总是收到此错误,但不知道这意味着什么或如何正确处理子项返回:
Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it.
<... children={function children}>
在您的 SubscriptionDataFetcher 组件中,您期望 Children 是一个以数据作为参数的函数。但是,在您的 Packages 组件中,您尝试将此函数用作 SubscriptionDataFetcher 的子函数,这导致了错误。
要解决此问题,您可以更改 SubscriptionDataFetcher 以直接渲染其子级,并将数据作为 prop 传递给子级。方法如下:
const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
const [data, setData] = useState<SubscriptionData>({});
// Some functions
return <>{children}</>;
};
然后,在您的 Packages 组件中,您可以使用数据作为 prop:
const Packages: React.FC = () => {
return (
<SubscriptionDataFetcher>
<ChildComponent data={data} />
</SubscriptionDataFetcher>
);
};
如果你想保留 function-as-child 模式,你可以使用 React.cloneElement 函数来克隆子元素并将数据作为 prop 传递:
const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
const [data, setData] = useState<SubscriptionData>({});
// Some functions
return <>{React.cloneElement(children, { data })}</>;
};
然后,在您的 Packages 组件中,您可以使用数据作为 prop:
const Packages: React.FC = () => {
return (
<SubscriptionDataFetcher>
<ChildComponent />
</SubscriptionDataFetcher>
);
};