Tabulator 自定义格式化程序中的 React 组件答案

【问题标题】：React component in a Tabulator custom formatterTabulator 自定义格式化程序中的 React 组件
【发布时间】：2020-02-22 20:49:38
【问题描述】：

我正在尝试通过custom formatter 在Tabulator table 单元格中插入一个链接组件。

单元格中没有显示任何内容，如 the codesandbox 所示。

为什么不能从函数中返回 JSX？ 我怎样才能做到这一点？

const invoiceLinkFormatter = (cell, formatterParams) => {     // <------ Custom formatter definition
    let key = cell.getValue();
    let link = `/invoices/${key}`;
    return (<Link to={link}>{key}</Link>);
};

invoicesTable.current = new Tabulator(refInvoicesTable.current, {
    columns: [
        {
            title: "Invoices",
            field: "invoiceKey",
            formatter: invoiceLinkFormatter     // <------ Custom formatter use
        },
        { title: "Dates", field: "invoiceDate" }
    ]
});

这种方法有效，但由于链接离开反应应用程序并重新加载所有内容，它违背了目的。

const columns = [
    {
        title: "Invoice", 
        field: "invoiceKey", 
        formatter: "link", 
        formatterParams: { url: cell => { return "/invoices/" + cell.getValue() } }
    },
    { title: "Date", field: "invoiceDate" },
];

【问题讨论】：

标签： javascript reactjs jsx tabulator

【解决方案1】：

这是因为您使用的布局框架会在页面加载时解析 DOM，因此在此之后添加到页面的任何元素都不会被正确解析，除非它们是通过框架函数添加的。

在 Tabulator 格式化单元格后，您可能可以在布局框架上调用一个函数来重新解析 DOM。

【讨论】：

【解决方案2】：

如果我有误解，请原谅我，但我相信您可以结合使用 ReactDOM.render() 和 Tabulator 的自定义格式化程序的 onRendered 参数来提供帮助。

import ReactDOM from "react-dom";
...
const journalLinkFormatter = (cell, formatterParams, onRendered) => {
  onRendered(() => {
    let key = cell.getValue();
    let link = `/journals/${key}`;
    ReactDOM.render(
      <Link
        style={{ color: "blue", fontWeight: "bold", background: "red" }}
        to={link}
      >
        {key}
      </Link>,
      cell.getElement()
    );
  });
};

【讨论】：