React 中的 Ag-grid 純 JS 單元格渲染器

Question

我在 React 應用程序中使用 ag-grid。 我們有帶有自定義單元格的重型表格。 使用作為 React 組件構建的自定義單元格渲染器時存在性能問題，這是最直觀的論述。

ag-grid 文檔指出這可能不是一個好主意：

不要為單元格渲染器使用框架（例如 Angular 或 React）。 網格渲染是高度定制的，純 JavaScript 單元格渲染器將比框架等效項更快地工作。

但這也表明純 JS 可以與 React 等框架結合使用：

使用 ag-Grid 的框架版本仍然很好（例如用於設置 ag-Grid 屬性等），但是因為有太多的單元被創建和銷毀，框架添加的附加層無助於性能，如果您有性能問題。

我誤解了這個嗎？ 在我看來，我可以只使用一個普通的 JS 類作為單元格渲染器（不知何故，也許他們會處理與 React 的集成？）

所以我拿了他們的示例代碼並將其轉換為類而不是函數以符合他們的打字稿定義：

// function to act as a class
class MyCellRenderer {
    eGui: any;
    eButton: any;
    eValue: any;
    eventListener: any;

    init(params: any) {
        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = 
            '<span class="my-css-class"><button class="btn-simple">Push Me</button><span class="my-value"></span></span>';

        // get references to the elements we want
        this.eButton = this.eGui.querySelector('.btn-simple');
        this.eValue = this.eGui.querySelector('.my-value');

        // set value into cell
        this.eValue.innerHTML = params.valueFormatted ? params.valueFormatted : params.value;

        // add event listener to button
        this.eventListener = function() {
            // tslint:disable-next-line
            console.log('button was clicked!!');
        };
        this.eButton.addEventListener('click', this.eventListener);
    }

    // gets called once when grid ready to insert the element
    getGui() {
        return this.eGui;
    }

    // gets called whenever the user gets the cell to refresh
    refresh(params: any) {
        // set value into cell again
        this.eValue.innerHTML = params.valueFormatted ? params.valueFormatted : params.value;
        // return true to tell the grid we refreshed successfully
        return true;
    }

    // gets called when the cell is removed from the grid
    destroy() {
        // do cleanup, remove event listener from button
        this.eButton.removeEventListener('click', this.eventListener);
    }
}

// gets called once before the renderer is used

export default MyCellRenderer;

這構建得很好。 現在，當我在應用程序中拉出我的桌子時，我得到了一些可預測的錯誤：

MyCellRenderer(...)：渲染沒有返回任何內容。 這通常意味着缺少 return 語句。 或者，不渲染任何內容，返回 null。

所以它只期待一個 React 組件？ 看來無論如何我都需要提供渲染操作。

有誰知道這里發生了什么/如何解決這個問題？ 我誤解了文檔嗎？

謝謝！

ps ag-grid 很棒！

Answer 1

剛剛想出了怎么做。 您可以為渲染器和編輯器的網格實例提供兩組“網格組件”屬性。

frameworkComponents屬性包含將使用您正在使用的框架呈現的組件，例如 React 或 Angular。

components屬性包含將使用直接 JS 呈現的屬性。

您可以隨意混合這些，例如，假設您有一些使用此模式導出的渲染器：

export const XRenderer = {
  id: 'someId',
  renderer: function() ... // or class, or whatever
}

// React components
const frameworkComponents = {
  [CheckboxRenderer.id]: CheckboxRenderer.renderer,
  [SelectRenderer.id]: SelectRenderer.renderer
};

// JavaScript components
const components = {
  [RateRenderer.id]: RateRenderer.renderer
};

<Grid
  columnDefs={columnDefinitions}
  theme={theme}
  rowData={rows}

  frameworkComponents={gridComponents} // React components
  components={components} // JavaScript components

  onGridReady={this.onGridReady}          
  context={this.gridContext}
  gridOptions={this.mainGridOptions}
  ...
/>

有關如何執行此操作的信息實際上在文檔中，但不是在一個特別有用的地方： https : //www.ag-grid.com/javascript-grid-components/#mixing-javascript-and-framework