react ag-grid表不显示并显示错误

Question

我想做的是显示一个包含一个ag-grid表格的组件，一个侧栏和另一个ag-grid表格的其他组件。

错误：元素类型无效：预期是一个元素。Element type is invalid: expected a string (for built-in components) or a classfunction (for composite components) but got: object.

请检查 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} 但现在它显示了这个错误信息。

Failed to compile.srcApp.jsAttempted import error: 'ConsultaNiños' is not exported from '.layoutConsultaNiños'.

好吧，这条消息意味着在导出组件时应该有一个错误，但当我在导入的 ConsultaNiños 意思是说，问题可能直接出在ag-grid表组件上，但sintaxis似乎没有错误，所以问题就出在这里。

如果你能帮助我，我将非常感激<3。

Answer 1

我想做的是在同一个组件中渲染所有的东西，我试图创建表格。显然，这是不正确的，因为网格配置，所以我只是在不同的组件中制作了每个表，并将它们关联到第三个组件中，我在其中添加了两个表，这第三个组件作为表之间的中间物，并允许通过道具在表之间进行通信。