reactjs - 反应 ag-grid 表未显示并显示错误

问题描述

我想要做的是显示一个组件，其中包含一个 ag-grid 表、一个侧边栏和另一个是另一个 ag-grid 表的组件。好吧，当我启动程序时，它在开始时运行良好，但是当我转到我告诉您应该显示的组件的路线时，会出现以下错误消息：

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

检查ConsultaNiños.

这是ConsultaNiños其他所有内容的代码：

import React, {Component} from 'react'
import SideBar from './SideBar'
import AgGridReact from 'ag-grid-react'
import TablaDatosNiño from './TablaDatosNiño'
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';

class ConsultaNiños extends Component{
    constructor(props){
        super(props)
        this.state={
            columnDefs:[{
                headerName:'Nombre', field:'Nombres'
            }],
            rowData:null
        }
    }

    render(){
        return(
            <div>
                <div>{/*this is the sidebar*/}
                    <SideBar></SideBar>
                </div>

                {/**here is the table that i made in this same component*/}
                <div className='ag-theme-alpine-dark'style={{height:'600px'}}>
                    <AgGridReact
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
                    /> 
                </div>

                {/**this is the other table i want to display*/}
                <div>
                    <TablaDatosNiño></TablaDatosNiño>
                </div>
            </div>
        )
    }
}

export default ConsultaNiños

这是该组件的另一个表的代码TablaDatosNiños：

import React, {Component} from 'react'
import AgGridReact from 'ag-grid-react'
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';

class ConsultaNiños extends Component{
    constructor(props){
        super(props)
        this.state={
            columnDefs:[{
                headername:'IDalumno',field:'idalumno'
            },{
                headername:'Nombre',field:'nombre'
            },{
                headername:'Fechadenacimiento',field:'fecha de nacimiento'
            },{
                headername:'Horario',field:'horario'
            },

很多列都是这样的。然后是rowData和render方法：

rowData:[]
        }
    }

    render(){
        return(
            <div>
                {/**tabla con los datos del niño*/}
                <div className='ag-theme-alpine-dark'style={{height:'600px'}}>
                    <AgGridReact
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
                    /> 
                </div>
            </div>
        )
    }
}

export default ConsultaNiños

这是我的 app.js 文件：

import React, { Component, Fragment } from 'react';
import './App.css';
import Login from './layout/login.js';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Matriculacion from './pages/Matriculacion';
import Medicinas from './pages/Medicinas';
import IngEg from './pages/IngEg';
import ConsultaNiños from './layout/ConsultaNiños'




 class  App extends Component {

  render(){
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path = '/' render = {pops => (
              <Fragment>
                <Login></Login>
              </Fragment>
            )}/>
            <Route exact path = '/Matriculacion' component = {Matriculacion}/>
            <Route exact path = '/Medicinas' component = {Medicinas}/>
            <Route exact path = '/Ingresos_Egresos' component = {IngEg}/>
            <Route exact path = '/Table' component={ConsultaNiños}/>
          </Switch>
        </div>    
      </Router>
    );
  }

}

export default App;

打开组件的路径是/Table。

好吧，我对此进行了研究，并通过在导入中添加花括号找到了可能的解决方案，{ConsultaNiños}但现在它显示了以下错误消息：

无法编译 ./src/App.js 尝试导入错误：“ConsultaNiños”未从“./layout/ConsultaNiños”导出。

好吧，该消息意味着导出组件时应该有错误，但是当我删除导入中的花括号ConsultaNiños并删除组件中的两个表时，它可以正常工作并且出现任何导出错误。这意味着问题可能直接在 ag-grid 表组件中，但 sintaxis 似乎没有错误，所以有问题。

如果您能帮助我，我将不胜感激<3

标签： reactjsag-grid

reactjs - 反应 ag-grid 表未显示并显示错误

问题描述

解决方案

推荐阅读