javascript - React hoc 禁用字段

Question

在反应中，我的应用程序中有一堆表单，并根据用户类型（管理员等）确定输入是否被禁用。我为组件制作了一个单独的文件，必须有更好的方法：

export const Select = props => {
  const { isAdmin } = useAppContext();
  return <AntdSelect disabled={!isAdmin} {...props} />;
};
export const Input = props => {
  const { isAdmin } = useAppContext();
  return <AntdInput disabled={!isAdmin} {...props} />;
};
export const Switch = props => {
  const { isAdmin } = useAppContext();
  return <AntdSwitch disabled={!isAdmin} {...props} />;
};

基本上我从我的上下文变量中提取 isAdmin 但我不想对每个组件都这样做。有什么更好的方法来做到这一点？

标签： javascriptreactjs

Answer 1

我不确定我是否理解你的问题，但你可以做这样的事情。

function Example() {
  // Declare a new state variable
  const { isAdmin } = useAppContext();

  return (
    <div>
      <AntdSelect disabled={!isAdmin}  />;
      <AntdInput disabled={!isAdmin}  />;
      <AntdSwitch disabled={!isAdmin}  />;
    </div>
  );
}