что я хочу сделать, это отобразить компонент, который содержит таблицу ag-grid, боковую панель и другой компонент, который является другой таблицей ag-grid. хорошо, когда я запускаю программу, она идет хорошо в начале, но когда я go к маршруту, где должен быть показан компонент, который я вам сказал, появляется это сообщение об ошибке:
Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получили: 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 и метод визуализации:
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
вот мое приложение. js file:
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, но синтаксис, похоже, не содержит ошибок, поэтому проблема есть.
Я был бы очень признателен, если бы вы могли помочь мне <3 </p>