制表程序自定义格式程序中的反应组件

Question

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

[如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" }
    ]
});

此方法有效，但是当链接离开react应用并重新加载所有内容时，它无法达到目的。

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

Answer 1

这是因为您正在使用的布局框架会在页面加载时解析DOM，因此，除非通过框架功能添加元素，否则此点之后添加到页面的任何元素都将无法正确解析。

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