javascript - React 中的 Ag-grid 纯 JS 单元渲染器

Question

我在 React 应用程序中使用 ag-grid。我们有带有定制单元的重型 table 。使用作为 React 组件构建的自定义单元格渲染器时存在性能问题，这是最直观的论述。

ag-grid 文档指出这可能不是一个好主意:

Do NOT use a framework (eg Angular or React) for the cell renderers. The grid rendering is highly customised and plain JavaScript cell renderers will work faster than framework equivalents.

但这也表明普通 JS 可以与 React 等框架结合使用:

It is still fine to use the framework version of ag-Grid (eg for setting ag-Grid properties etc) however because there are so many cells getting created and destroyed, the additional layer the frameworks add do not help performance and should be provided if you are having performance concerns.

我是否误解了这一点？在我看来，我可以只使用一个普通的 JS 类作为单元格渲染器(不知何故，也许他们会处理与 React 的集成？)

因此，我采用了他们的示例代码，并将其转换为类而不是函数，以符合他们的 typescript 定义:

// 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(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

所以它只期待一个 React 组件？看来无论如何我都需要提供渲染操作。

有谁知道这是怎么回事/如何解决这个问题？我是否误解了文档？

谢谢!

附: 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