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组件？看来我还是需要提供渲染操作。

有谁知道这里发生了什么/如何解决这个问题？我误解了文档吗？

谢谢！

P.S。 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

React中的Ag-grid普通JS单元渲染器

1 个答案: