Ant Design

Ant Design React

<Select/>

Antd <Select />组件中通过dropdownRender在额外元素上加的onClick()事件为什么不生效?

这个问题会导致和<Form>合用时,获取value有bug

使用 optionLabelProp 指定回填到选择框的 Option 属性。
需要不使用value

覆盖样式

:global .ant-tree li .ant-tree-node-content-wrapper:hover {
background-color: white;
}

组件权限

interface AuthorizedProps {
authority?: string;
noMatch: React.ReactElement | null;
user: UserModelState;
children: (string | React.ReactElement)[] | React.ReactElement;
}

const Authorized: React.FC<AuthorizedProps> = ({ children, authority, noMatch, user }) => {
const adminSet = new Set([
]);
if (authority === 'admin' && (user.currentUser?.id ? adminSet.has(user.currentUser.id) : false)) {
return children as React.ReactElement;
}
return noMatch;
};

export default connect(({ user }: ConnectState) => ({ user }))(Authorized);

页面权限

interface AuthorizedProps {
user: UserModelState;
children: (string | React.ReactElement)[] | React.ReactElement;
}

const auth: React.FC<AuthorizedProps> = ({ children, user }) => {
const adminSet = new Set([
]);
if (user.currentUser?.id ? adminSet.has(user.currentUser.id) : false) {
return children as React.ReactElement;
}
return <NoPermissionPage />;
};

export default connect(({ user }: ConnectState) => ({ user }))(auth);

Ant Design Pro

ProTable

Mock

匹配路由,本质是express server,利req来识别不同的query参数,在res中返回

const getNotices = (req, res) => {
if (req.query.name === '1') {
res.json(s)
}
}

export default {
'GET /api/notices': getNotices,
};

参考资料