¡Gracias por tu ayuda! Tengo dos preguntas:
1.)
Tengo una función "Cuadrícula":
function Grid(props) { const {icon, title} = props; const classes = styles(); return ( <div className={classes.wrapper}> <div className={classes.item}>{icon}</div> <Typography textDecorator="bold" className={classes.item} variant="h5">{title}</Typography> <div className={classes.item}> <CustomBtn/> </div> </div> ) }¿Cómo llamo a la función pero no llamo a CustomBtn? Esto se relaciona con mi siguiente pregunta.
2.)
function App() { const classes = styles(); return ( <div className="App"> <ThemeProvider theme={theme}> <NavBar/> <div className={classes.wrapper}> <Typography variant="h4" className={classes.bigSpace} color="primary"> Welcome, to the future of healthcare. </Typography> </div> <div className={`${classes.grid} ${classes.bigSpace}`}> <Grid icon={<SecurityIcon style={{fill: "#4360A6", height:"125", width:"125"}}/>} title="Secure" /> <Grid icon={<EventNoteIcon style={{fill: "#449A76", height:"125", width:"125"}}/>} title="Patient-driven" btnTitle="Patients control their data"/> <Grid icon={<TrendingUpIcon style={{fill: "#D05B2D", height:"125", width:"125"}}/>} title="Autonomous" btnTitle="No corporate malice included"/> </div> <div className={`${classes.grid} ${classes.bigSpace}`}> <Grid btnTitle="Providers" title="Offload patient data handling to us"/> <Grid btnTitle="Patients" title="Take control of your medical data"/> <Grid btnTitle="Companies" title="See real-time patient outcomes"/> </div> <div className={classes.bigSpace}> <Footer/> </div> </ThemeProvider> </div> ); }¿Hay alguna forma de llamar a "CustomBtn" dentro de uno de esos elementos de cuadrícula? Me gusta:
<Grid btnTitle="Companies" title="See real-time patient outcomes" {<CustomBtn text="hello" color="red"}/>Intenté lo anterior y no funcionó, ¿hay alguna manera de lograr esto?
{props.showCustomBtn && <CustomBtn... />} <Grid btnTitle="Companies" title="See real-time patient outcomes"><CustomBtn text="hello" color="red"}/></Grid> Y luego represente a los children dentro del componente Grid:
function Grid(props) { return ( <div> {props.children} </div> ); }Obviamente, lo anterior es solo para mostrar la idea general. Colocaría {props.children} dentro de la Cuadrícula donde quiera que se represente el CustomBtn.
Lo descubrí y las dos respuestas van de la mano.
Para el n. ° 1.) Debe asegurarse de pasar todas las "características personalizadas" del accesorio a la función como accesorios como:
function Grid(props) { const {icon, title, button} = props; const classes = styles(); return ( <div className={classes.wrapper}> <div className={classes.item}>{icon}</div> <Typography textDecorator="bold" className={classes.item} variant="h5">{title}</Typography> <div className={classes.item}> {button} </div> </div> ) }En la segunda línea, no pasé un botón antes, así que estaba teniendo ese problema.
Luego para la respuesta #2.):
<Grid button={<CustomBtn text="Companies" />} title="See real-time patient outcomes"/>