React + Antd v5 更新状态后元素不变的问题？

useState 之类的 hooks 只能在自定义 hook 或者函数组件内使用，不能在顶层作用域使用。不过神奇的是这样写居然能编译，我在 TS + React 环境下试了试，直接过不了 lint 检测。

并且 React 没有响应式属性的概念，因此无法在两个独立的组件之间共享 state ，要实现类似的功能，可以使用 sustand。

安装

npm install zustand

使用：

import { create } from "zustand";
const useStore = create((set) => ({
  editLock: false,
  setEditLock: (value) => set(() => ({ editLock:value })),
}));

const MenuAction = () => {
  const { editLock, setEditLock } = useStore((state) => state);

  return (<Flex justify={`space-around`} align={`center`}>
        <Tooltip title="编辑子系统" placement="top">
            <UnlockOutlined onClick={() => setEditLock(true)} />
        </Tooltip>
    </Flex>)
}

const formatMenu = (data: any) => data.map((item: any) => ({
    key: item.id,
    children: [],
    label: () => {
      const { editLock } = useStore((state) => state);
      return !editLock? <SwitcherOutlined />: null
    },
}))

这里的 label 要作为组件传递和使用，而不是作为 JSX.Element。