我有以下组件:
export const ActionCell = () => {
const {
edit,
handleEditComplete,
handleEditCancel,
handleEdit,
handleDelete,
} = useRow();
return (
<StyledActionCell>
<Group>
{edit ? (
<>
<Complete onClick={handleEditComplete} />
<Cancel onClick={handleEditCancel} />
</>
) : (
<>
<Edit onClick={handleEdit} />
<Delete onClick={handleDelete} />
</>
)}
</Group>
</StyledActionCell>
);
};
我希望在我的应用程序中重用这个组件,但是使用相同的API在不同的上下文中使用。因此,来自钩子的所有函数和变量都是可用的,但提供程序中的逻辑实现是不同的。我该如何实施这一点?
目前useRow
引用了两个上下文之一,所以当使用未引用的上下文时会出错。
最好的问候
3条答案
按热度按时间23c0lvtd1#
我想了一下,可以编辑组件来注入函数:
如果有人有更好的主意,我很乐意听听。
j2cgzkjk2#
是否要使用useRow钩子来获取不同上下文提供的值?如果是这样,我可以提供一个想法。
首先创建你的context和hook:
import
useRow
使用ContextA或ContextB下的任何where。并且不要将钩子作为组件 prop 传递。阅读Rules of Hooks和Calling a React hook conditionally。
c6ubokkw3#
如果不告诉
useContext
从哪里获取数据,就不能使用不同的上下文。你可以做的是在不同的地方使用相同的
Context
。相同的组件、相同的上下文提供程序、不同的提供值