时间戳

首页 > 解决方案 > 如何使用 mobx 观察者与 antd 表列渲染功能

antd - 如何使用 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>
            );
        }),
    },
];

谢谢

标签： antdmobx

解决方案

由于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只是字符串原语。

推荐阅读