javascript - 在 React 组件中使用 Canvas-Datagrid

Question

我正在尝试合并 ' canvas-datagrid ' 模块到 React.但是，我不断收到此错误:

Uncaught Error: Objects are not valid as a React child (found: [object HTMLElement]). If you meant to render a collection of children, use an array instead. ... in grid (created by CanvasGrid)...

该代码是 React example 上的代码的轻微修改版本。 :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CanvasDataGrid from 'canvas-datagrid';

class CanvasGrid extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const args = {};
    this.grid = ReactDOM.findDOMNode(this);
    this.updateAttributes();
  }
  componentWillReceiveProps(nextProps) {
    this.updateAttributes(nextProps);
  }
  shouldComponentUpdate() {
    return false;
  }
  componentWillUnmount() {
    this.grid.dispose();
  }
  updateAttributes(nextProps) {
    Object.keys(this.props).forEach(key => {
      if (!nextProps || this.props[key] !== nextProps[key]) {
        if (this.grid.attributes[key] !== undefined) {
          this.grid.attributes[key] = nextProps ? nextProps[key] : this.props[key];
        } else {
          this.grid[key] = nextProps ? nextProps[key] : this.props[key];
        }
      }
    });
  }
  render() {
    return (
      <div>
        <CanvasDataGrid />;
      </div>
    );
  }
}
export default CanvasGrid;

根据我对示例的理解，没有什么特别需要做的，但是，当 React 尝试渲染 <CanvasDataGrid> 时，会遇到上述错误。组件。

Answer 1

npm 包 canvas-datagrid 导出一个 Web 组件，而不是 React 组件。您必须使用 React 在 UI 中渲染该组件。
您要做的就是将该脚本包含在 index.html 中，然后创建一个带有渲染函数的 React 组件 CanvasGrid:

render() {
    return React.createElement('canvas-datagrid', {});
}

有关完整组件代码，请参阅 this file .