Estoy tratando de averiguar cómo trabajar con la biblioteca Matherial UI en React. Así que descargué la plantilla gratuita de Dashboard. Y me quedé con el siguiente problema:
... import {mainListItems} from './listItems'; ... function DashboardContent() { ... return ( ... <List component="nav"> <ListSubheader component="div" > Выбрать технику </ListSubheader> {equipmentChoice} <ListSubheader component="div" disableSticky={true}> Загрузить отчёты </ListSubheader> {mainListItems} // How to pass data in this component??? </List> ... export default function Dashboard() { return <DashboardContent />; }Además, tengo un archivo listItems.js. Pero no contiene componente de función ni componente de clase, solo una constante con una lista de etiquetas JSX en su lugar. Esto es tan inusual para mí que no entiendo cómo trabajar con este archivo.
import * as React from 'react'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import HourglassEmpty from '@mui/icons-material/HourglassEmpty'; import HourglassBottom from '@mui/icons-material/HourglassBottom'; import HourglassFull from '@mui/icons-material/HourglassFull'; export const mainListItems = ( <React.Fragment> <ListItemButton> <ListItemIcon> <HourglassEmpty /> </ListItemIcon> <ListItemText primary="Don't know how to change" /> // I need to change this from Dashboard.js component </ListItemButton> </React.Fragment> );¿Cómo usar Hook como useState en tal situación?
Iván, bienvenido a Stackoverflow. Su componente ListItems.js también se puede representar como se muestra a continuación.
import * as React from 'react'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import HourglassEmpty from '@mui/icons-material/HourglassEmpty'; import HourglassBottom from '@mui/icons-material/HourglassBottom'; import HourglassFull from '@mui/icons-material/HourglassFull'; export function mainListItems(){ // You can use useState hook here return ( <React.Fragment> <ListItemButton> <ListItemIcon> <HourglassEmpty /> </ListItemIcon> <ListItemText primary="Don't know how to change" /> // I need to change this </ListItemButton> </React.Fragment> ); }Puede usar ganchos dentro de esta función.