¿Cómo pasa datos de un componente funcional secundario a un componente funcional principal en react. Quiero los datos de la unidad de vehículo que se pasan del componente principal al componente secundario. Pero el componente secundario obtiene la entrada de datos específica que quiero pasar al principal. Hice un comentario en la composición infantil que muestra dónde quiero que se vuelvan a levantar los datos.
Componente principal:
import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import GridList from '@material-ui/core/GridList'; import GridListTile from '@material-ui/core/GridListTile'; import FolderOpenIcon from '@material-ui/icons/FolderOpen'; import Vehicle from "./vehicle"; const vehicleData = [ { name: "COMET", agency: "Agency 1", drive: "https://drive.google.com }, { name: "STAR", agency: "Agency 2", drive: "https://drive.google.com } ]; const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', overflow: 'hidden', backgroundColor: theme.palette.background.paper, marginTop: '1em' }, gridList: { flexWrap: 'nowrap', // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS. transform: 'translateZ(0)', }, title: { color: theme.palette.primary.light, }, titleBar: { background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)' }, })); const setDataReceivedFromChild=(index)=>{ console.log(index); } const VehicleList = () => { const classes = useStyles(); const drive = React.useState(""); return ( <div className={classes.root}> <GridList className={classes.gridList} cols={10}> {vehicleData.map((vehicle) => ( <GridListTile key={FolderOpenIcon} style={{width: '30rem'}}> <Vehicle vehicle={vehicle} receiveDataFromChild={this.setDataReceivedFromChild}/> </GridListTile> ))} </GridList> </div> ); } export default VehicleList;Componente hijo:
import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import FolderOpenIcon from '@material-ui/icons/FolderOpen'; const useStyles = makeStyles((theme) => ({ root: { margin: '0.5em', display: 'flex', flexWrap: 'wrap', '& > *': { margin: theme.spacing(1.2), width: theme.spacing(15), height: theme.spacing(18), }, }, })); const sendDataToParent=(index)=>{ this.receiveDataFromChild(index); } const Vehicle = ({vehicle}) => { const classes = useStyles(); const driveURL = React.useState(""); return ( <Paper className={classes.root} elevation={3}> <Grid container spacing={2}> <Grid item> <Typography style={{ fontSize: '20px'}} className={classes.title} color="textSecondary" gutterBottom> {vehicle.name} </Typography> <Typography variant="h5" component="h2"> {vehicle.agency} </Typography> </Grid> <CardActions> <Button onClick={()=>{this.sendDataToParent(vehicle.drive)}} //this is where it needs to be passed size="small" color="secondary" startIcon={<FolderOpenIcon />} style={{fontWeight:"bold"}} > Drive </Button> <Button color="secondary" size="small" className={classes.button} startIcon={<CallIcon />} style={{fontWeight:"bold"}} > Data Calls </Button> <Button size="small" color="secondary" className={classes.button} startIcon={<DateRangeIcon />} style={{fontWeight:"bold"}} > Pipeline </Button> </CardActions> </Grid> </Paper> ); } export default Vehicle; import React, {Component, Fragment, useState, useEffect} from 'react'; import { withRouter } from 'react-router-dom' import Grid from '@material-ui/core/Grid'; import Box from "@material-ui/core/Box"; import CardsContainer from "../components/notifications/cards-container"; import VehicleList from "../components/vehicles/vehicles-list"; import DriveEmbedder from "../components/drive/drive-embedder";Padre al componente padre
class HomePage extends Component { constructor(props) { super(props); this.state = { currentUser: {name: 'Surpol', picture: undefined}, showNewNotification: false, driveURL: '', }; } getChildData = (id) => { console.log(id); this.setState({ //this is obviously wrong to do driveURL: id, }); } render() { return ( <Fragment> <Grid container spacing={1}> <Grid item xl={9} lg={9} md={12}> <Box style={{width: '100%', marginBottom: '1rem'}}> <VehicleList getChildData = {this.getChildData}/> //I want to get the data that was retrieved in the previous parent component here, and then change the this.state.driveURL to equal this </Box> <Box style={{width: '100%', height: '60vh', border: '2px', borderColor: 'black', marginTop: '1rem'}}> <DriveEmbedder url={this.state.driveURL} /> </Box> </Grid> </Grid> </Fragment> ); } } export default (withRouter(HomePage));Supongamos que la drive de estado debe estar presente en el padre y el hijo. Luego lo define en el padre y crea una función de devolución de llamada responsable de cambiar este estado setDrive .
En general, el estado debe definirse en el ancestro común más cercano entre los componentes que usan o cambian este estado y esto se denomina Lifting State Up . En tu caso, algo como esto (demo completa ):
Padre:
const VehicleList = () => { const classes = useStyles(); const [drive, setDrive] = React.useState(null); // the lifted state const sendDataToParent = (index) => { // the callback. Use a better name console.log(index); setDrive(index); }; return ( <div className={classes.root}> {vehicleData.map((vehicle) => ( <div key={vehicle.name} style={{ width: "20rem", border: vehicle.name === drive ? "1px solid red" : null }} > <Vehicle vehicle={vehicle} sendDataToParent={sendDataToParent} /> </div> ))} </div> ); };Niño:
const Vehicle = ({ vehicle, sendDataToParent }) => { const classes = useStyles(); const [showDriveAction, setShowDriveAction] = React.useState(false); const driveURL = React.useState(""); return ( <Paper className={classes.root} elevation={3}> <Grid container spacing={2}> {/* ... */} <CardActions> <Button onClick={() => { sendDataToParent(vehicle.name); }} //this is where it needs to be passed size="small" color="secondary" startIcon={<FolderOpenIcon />} style={{ fontWeight: "bold" }} > {/* ... */} </CardActions> </Grid> </Paper> ); };