Question

我正在尝试合并＆＃39; canvas-datagrid＆＃39;模块进入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在UI中呈现该组件您需要做的是在index.html中包含脚本，然后使用渲染函数创建一个React组件CanvasGrid：

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

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

在React Component中使用Canvas-Datagrid

1 个答案: