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

【问题标题】：react ag-grid table not displaying and shows an error反应 ag-grid 表未显示并显示错误
【发布时间】：2020-08-17 13:02:33
【问题描述】：

我想要做的是显示一个组件，其中包含一个 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 似乎没有错误，所以有问题。

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

【问题讨论】：

我找到了解决方案。就是把每张表分开创建一个组件，渲染到一个父组件中，作为组件之间的桥梁，实现组件之间的信息共享

标签： reactjs ag-grid

【解决方案1】：

好吧，我试图做的是在我试图创建表格的同一个组件中呈现所有内容。显然这是无效的，因为网格配置所以我只是在不同的组件中制作了每个表，并将它们关联到第三个组件中，我在其中添加了两个表，这第三个组件作为表之间的中间件，并允许通过表之间的通信道具

【讨论】：