如何将值传递到此react组件

Question

我有以下代码结构：

const AuthUserProvider = (props: UserProviderProps, user: User) => {
const ctx = {}; // gets some other user info from different API
return <UserContext.Provider value={ctx} {...props} />;
};
export const UserProvider = (props: UserProviderProps) => {
const user = {}; // gets user info from via API call
return <AuthUserProvider {...props} />;
}

我希望能够将user对象传递到AuthUserProvider组件中，但当我尝试以下操作时：

return <AuthUserProvider {...props} user={value} />;

我得到这个错误：

TS2322:类型上不存在属性"user"。。。。。。

如何将此用户对象传递到AuthUserProvider组件？为什么上述方法不起作用？

Answer 1

您只需将user添加到UserProviderProps定义中即可。

Answer 2

@Yanick Bélanger 已经提到

您只需将用户添加到UserProviderProps定义中。

// Your `UserProviderProps` interface 
{
// Existing UserProviderProps
user: User
}

所以功能原型将变得像

const AuthUserProvider = (props: UserProviderProps) => {};

或者，如果您不想接触UserProviderProps的内容，请按以下更改功能原型

const AuthUserProvider = (props: {userProvider: UserProviderProps, user: User}) => {};