[英]react ag-grid table not displaying and shows an error
what i want to do is to display a component that contains an ag-grid table, a side bar and an other component that is an other ag-grid table.我想要做的是显示一个组件,其中包含一个 ag-grid 表、一个侧边栏和另一个是另一个 ag-grid 表的组件。 well when i start the program it goes well at the begining but when the i go to the route where the component i told you should be displayed appears this error message:
好吧,当我启动程序时,它在开始时运行良好,但是当我 go 到我告诉你应该显示的组件的路径时出现此错误消息:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:object。
Check the render method of ConsultaNiños
.检查
ConsultaNiños
的渲染方法。
here is the code for the ConsultaNiños
where everything all the others are:这是
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
here is the code for the other table the component TablaDatosNiñ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'
},
it goes on like that with a lot of columns.很多列都是这样的。 Then here is the rowData and the render method:
然后是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
here is my app.js file:这是我的 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;
the route that opens the component is the /Table.打开组件的路径是/Table。
well i researched for this and found what could be a possibe solution by adding curly braces to the import of the {ConsultaNiños}
but now it shows this error message:好吧,我对此进行了研究,并通过在
{ConsultaNiños}
的导入中添加花括号找到了可能的解决方案,但现在它显示了以下错误消息:
Failed to compile./src/App.js Attempted import error: 'ConsultaNiños' is not exported from './layout/ConsultaNiños'.编译失败。/src/App.js 尝试导入错误:“ConsultaNiños”未从“./layout/ConsultaNiños”导出。
well that message means that there should be an error on exporting the component but when i delete the curly braces in the import of ConsultaNiños
and delete both of the tables in the component it works perfectly and with any export errors.好吧,该消息意味着导出组件时应该有一个错误,但是当我在
ConsultaNiños
的导入中删除花括号并删除组件中的两个表时,它可以正常工作并且出现任何导出错误。 meaning that the problem may be directly in the ag-grid tables components but the sintaxis seems having no mistakes so there is the problem.这意味着问题可能直接在 ag-grid 表组件中,但 sintaxis 似乎没有错误,所以有问题。
i would be very grateful if you could help me <3如果您能帮助我,我将不胜感激<3
well what i was trying to do was to render everything in the same component i was trying to create the table.好吧,我想做的是在我试图创建表格的同一个组件中渲染所有内容。 Aparently this is not valid because the grid configuration so i just made each table in a diferent component and related them in a third component in which i added both tables, this third component works as an intermediate between the tables and allow communication between the tables via props
显然这是无效的,因为网格配置所以我只是在一个不同的组件中制作每个表,并将它们关联到我添加两个表的第三个组件中,这第三个组件作为表之间的中间件,并允许通过表之间的通信道具
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.