Реагировать на компонент в пользовательском формататоре Tabulator - PullRequest
Новая
       58

Реагировать на компонент в пользовательском формататоре Tabulator

0 голосов
/ 22 февраля 2020

Я пытаюсь вставить компонент Link в ячейку таблицы Tabulator с помощью пользовательского форматера .

В ячейке ничего не отображается, как видно из коды и поля .

Почему 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" },
];

1 Ответ

0 голосов
/ 10 апреля 2020

Это связано с тем, что используемая вами структура макета анализирует DOM при загрузке страницы, поэтому любые элементы, добавленные на страницу после этой точки, не будут анализироваться правильно, если они не добавлены через функции каркасов.

Существует вероятно, функцию, которую вы можете вызвать в вашей структуре макета для повторного анализа DOM после того, как Tabulator отформатирует ячейку.

...