反应:Vaadin网格排序列TypeError:没有新的

时间:2019-06-17 18:28:53

标签: javascript node.js reactjs vaadin-grid

我想在react项目中使用vaadin网格。特别是我对看起来不错的排序和过滤功能很感兴趣!因此,我尝试使用vaadin组件页面上所描述的,但是总是得到“ TypeError:没有'new'”异常就无法调用类构造函数GridColumnElement。 有人知道我在做什么错吗?还是有人可以与我分享一个可行的例子?

import React from 'react';

import '@vaadin/vaadin-button';
import '@vaadin/vaadin-grid';
import '@vaadin/vaadin-grid/vaadin-grid-sort-column';
import '@vaadin/vaadin-form-layout';
import '@vaadin/vaadin-checkbox';
import '@vaadin/vaadin-combo-box';
import '@vaadin/vaadin-text-field';
import '@vaadin/vaadin-custom-field';
import '@vaadin/vaadin-ordered-layout';
import '@vaadin/vaadin-date-picker'
import '@vaadin/vaadin-tabs'
import '@vaadin/vaadin-icons'

class Example extends React.Component {
  /**
   * Will called whenever the component is rendered to the DOM for the first time.
   */
  componentDidMount() {
      window.addEventListener("WebComponentsReady", () => {
        this.refs.grid.dataProvider = this.load;
      });
      this.refs.grid.size = 20; 

  }

  load(params, callback) {
      fetch(URL, 
        {
            method: 'get'
        })
        .then(response => response.json())
        .then(data => callback(data, data.length));
  }

  render() {
    return (
        <div>            
            <vaadin-grid ref="grid" theme="column-borders row-stripes wrap-cell-content">
                <vaadin-grid-sort-column resizable path="id" header="ID"></vaadin-grid-sort-column>
                <vaadin-grid-column resizable header="Name"></vaadin-grid-column>
            </vaadin-grid>
        </div>
    );
  }
}

export default Example;

exception message

谢谢

0 个答案:

没有答案