如何将 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 只是字符串原语。