reactjs 如何定义一个React组件来使用可互换的上下文?

watbbzwu  于 2023-05-22  发布在  React
关注(0)|答案(3)|浏览(145)

我有以下组件:

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引用了两个上下文之一,所以当使用未引用的上下文时会出错。
最好的问候

23c0lvtd

23c0lvtd1#

我想了一下,可以编辑组件来注入函数:

interface ActionCellProps {
  useRow: () => RowContextProps;
}

export const ActionCell = ({ useRow }: ActionCellProps) => {
  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>
  );
};

如果有人有更好的主意,我很乐意听听。

j2cgzkjk

j2cgzkjk2#

是否要使用useRow钩子来获取不同上下文提供的值?如果是这样,我可以提供一个想法。
首先创建你的context和hook:

import { createContext, useContext } from "react";

export const ContextA = createContext(null)

export const ContextB = createContext(null)

export const useRow = () => {
  const dataA = useContext(ContextA)
  const dataB = useContext(ContextB)
  return dataA || dataB
}

import useRow使用ContextA或ContextB下的任何where。

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>
  );
}

并且不要将钩子作为组件 prop 传递。阅读Rules of HooksCalling a React hook conditionally

c6ubokkw

c6ubokkw3#

如果不告诉useContext从哪里获取数据,就不能使用不同的上下文。
你可以做的是在不同的地方使用相同的Context

const ActionContext = React.createContext()
...
return (<>
    <ActionContext.Provider value={...value1}><ActionCell /></ActionContext.Provider>
    <ActionContext.Provider value={...value2}><ActionCell /></ActionContext.Provider>
    <ActionContext.Provider value={...value3}><ActionCell /></ActionContext.Provider>
</>)

相同的组件、相同的上下文提供程序、不同的提供值

相关问题