reactjs 如何在Next JS中使用Igr数据网格？

4xrmg8kj 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(148)

我是Next js的新手，目前我正在尝试在我的应用程序中使用igr数据网格。当我尝试在react中使用igr数据网格时，我收到错误**“ReferenceError：未定义HTML元素”**
如何才能做到这一点？
我的代码：

import { IgrDataGrid } from "igniteui-react-grids";
    import { IgrTextColumn } from "igniteui-react-grids";
    
    const details = [
      {
        Name: "Jack",
        Company : "Google",
      },
      {
        Name: "Jack",
        Company : "Google",
      },
      {
        Name: "Jack",
        Company : "Google",
      },
      {
        Name: "Jack",
        Company : "Google",
      },
      {
        Name: "Jack",
        Company : "Google",
      },
      {
        Name: "Jack",
        Company : "Google",
      },
    ];
    
    const table = () => {
      return (
          <h1>USER DETAILS</h1>
          <div>
            <div className="container">
              {
                <IgrDataGrid dataSource={details}>
                  <IgrTextColumn field="Name" horizontalAlignment="center" />
                  <IgrTextColumn field="Company" horizontalAlignment="center" />
                </IgrDataGrid>
              }
            </div>
          </div>
      );
    };
    
    export default table;

reactjs

来源：https://stackoverflow.com/questions/75507988/how-to-use-igr-data-grid-in-next-js

1条答案

按热度按时间

koaltpgm1#

查看下面的代码。

import { useEffect } from 'react';
import { IgrDataGrid, IgrTextColumn } from 'igniteui-react-grids';

const details = [
  {
    Name: 'Jack',
    Company: 'Google',
  },
  {
    Name: 'Jack',
    Company: 'Google',
  },
  {
    Name: 'Jack',
    Company: 'Google',
  },
  {
    Name: 'Jack',
    Company: 'Google',
  },
  {
    Name: 'Jack',
    Company: 'Google',
  },
  {
    Name: 'Jack',
    Company: 'Google',
  },
];

const Table = () => {
  useEffect(() => {
    const IgrDataGridScript = document.createElement('script');
    IgrDataGridScript.src = 'https://cdn.infragistics.com/igniteui/2021.1/latest/js/infragistics.core.js';
    document.body.appendChild(IgrDataGridScript);
  }, []);

  return (
    <>
      <h1>USER DETAILS</h1>
      <div className="container">
        <IgrDataGrid dataSource={details}>
          <IgrTextColumn field="Name" horizontalAlignment="center" />
          <IgrTextColumn field="Company" horizontalAlignment="center" />
        </IgrDataGrid>
      </div>
    </>
  );
};

export default Table;

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何在Next JS中使用Igr数据网格？

1条答案

相关问题

热门标签

最新问答