时间戳

首页 > 解决方案 > 在原子组件之间传递元素/引用的规范 React-Redux 方法是什么？

reactjs - 在原子组件之间传递元素/引用的规范 React-Redux 方法是什么？

问题描述

我试图从使用本地 React 钩子将信息存储在 Redux中抽象出这个示例的一部分。

特别是，需要指定弹出菜单anchorEl才能锚定到父级<HTMLElement>进行定位。上面来自 MaterialUI 的示例实现了useState用于存储和更改此属性的挂钩：

const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

当我尝试将其转换为 Redux 时，

dispatch(accountMenuSlice.actions.setAnchorEl(event.currentTarget));

它最终试图存储不可序列化的<HTMLElement>，这是不可取的，产生以下警告/错误

react_devtools_backend.js:2430 A non-serializable value was detected in an action, in the path: `payload`. 
Value: <button>​…​&lt;/button>​ 
Take a look at the logic that dispatched this action:  
{type: "ACCOUNT_MENU_KEY/setAnchorEl", payload: button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-colorInherit.MuiIconButton-edgeEnd}

在原子组件之间传递元素/引用而不将抽象提升到父组件的规范 React-Redux 方法是什么？

标签： reactjsreduxmaterial-ui

解决方案

我最终只是使弹出框成为按钮的子项，并且非常干净：

// AccountButton.tsx
export default function AccountButton() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const handleAccountMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  return (
    <>
      <IconButton
        edge="end"
        aria-label="account of current user"
        aria-controls="primary-search-account-menu"
        aria-haspopup="true"
        onClick={handleAccountMenuOpen}
        color="inherit"
      >
        <AccountCircle />
      </IconButton>
      <AccountMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
    </>
  );
}

和

// AccountMenu.tsx
export default function AccountMenu(props: {
  anchorEl: HTMLElement;
  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement>>;
}) {
  const { anchorEl, setAnchorEl } = props;
...
}

推荐阅读