Question

我想做的是显示一个包含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 尝试导入错误：“ ./ layout /ConsultaNiños”未导出“ConsultaNiños”。

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

如果您能帮助我<3

Answer 1

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

反应农业网格表格未显示并显示错误

1 个答案: