如何解决如何将 mobx 观察器与 antd 表列渲染功能一起使用
当用观察者包装一个 antd 表列渲染函数时,我得到一个渲染不是函数的错误。我试图避免每次都需要创建一个单独的观察者包装的功能组件,我从列渲染函数调用该组件。任何人都有运气或知道如何使用观察者(或类似观察者的实现)直接包装列渲染函数?
这是打字稿代码:
import { observer } from "mobx-react-lite";
import { Button } from "antd";
import { ColumnsType } from "antd/lib/table";
import { TableDataSourceRecord } from "../models/TableDataSourceRecord";
const columns: ColumnsType<TableDataSourceRecord> = [
{
title: "View",dataIndex: "url",key: "url",render: observer((url: any,_record: TableDataSourceRecord) => {
return (
<Button type="link" href={url.value}>
View
</Button>
);
}),},];
谢谢
解决方法
由于 render
需要一个函数,因此您无法将 React.Component 传递给它,我猜(observer
创建组件)。
您是否尝试过 <Observer>
包装组件?
import { Observer } from "mobx-react-lite";
import { Button } from "antd";
import { ColumnsType } from "antd/lib/table";
import { TableDataSourceRecord } from "../models/TableDataSourceRecord";
const columns: ColumnsType<TableDataSourceRecord> = [
{
title: "View",dataIndex: "url",key: "url",render: (url: string,_record: TableDataSourceRecord) => {
return (
<Observer>
{() => (
<Button type="link" href={url}>
View
</Button>
)}
</Observer>
);
},},];
无论如何,在您的示例中使用 Observer
毫无意义,因为那里没有 observable
值,url
只是字符串原语。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。