0
171
Vistas¿Cómo pasar la propiedad infantil a los padres?
Tengo algunos botones dinámicos que son un componente secundario y se les asigna un value="URL" basado en mi MongoDB. ¿Cómo hago para pasar ese valor generado a mi componente principal/web src={currentSrc} ? Cuando lo asigno, ¿dice que currentSrc no está definido?
Aquí están las SizeOptions de tamaño:
import { useState } from "react"; export const SizeOptions = ({ size }) => { const sizeName = Object.keys(size); // Update Model Viewers Src function changeSize (){ setSrc(currentSrc) console.log(currentSrc) } if (!sizeName) return <></>; return ( <div> {size[sizeName].map((item) => ( <button key={item} className='size' value={item} onClick={changeSize} currentSrc={item}> {sizeName} </button> ))} </div> ); }; Y aquí está la ProductScreen :
import './ProductScreen.css'; import { useEffect, useState } from "react"; //Components import { SizeOptions } from '../components/SizeOptions'; const [currentSrc, setSrc] = useState(size[sizeName][0]) const ProductScreen = ({match}) => { return( <div className='sizebuttons'> {product && (product.size || []).map((size, index) => (<SizeOptions key={index} size={size} setSrc={currentSrc} changeSize={changeSize}/>))} </div> <div className="productscreen__right"> <model-viewer id="model-viewer" src={currentSrc} alt={product.productName} ar ar-modes="scene-viewer quick-look" ar-placement="floor" shadow-intensity="1" camera-controls min-camera-orbit={product.mincameraorbit} max-camera-orbit={product.maxcameraorbit} interaction-prompt="none"> <button slot="ar-button" className="ar-button"> View in your space </button> </model-viewer> </div> )}El botón renderizado:
Tengo más código dentro de mi ProductScreen , solo traté de mantenerlo lo más minimizado posible para intentar que me ayude a resolverlo. ¡Cualquier ayuda sería muy apreciada!
1 Respuestas
Responde la pregunta0
¡Buenas noticias! Finalmente lo descubrí después de muchos, muchos intentos.
Entonces, para pasar de niño a padre, esto es lo que se me ocurrió:
SizeOptions.js
export const SizeOptions = ({ size, changeSrc }) => { const sizeName = Object.keys(size); if (!sizeName) return <></>; return ( <div> {size[sizeName].map((url) => ( <button key={url} className='size' value={url} onClick={() => changeSrc(url)}> {sizeName} </button> ))} </div> ); }; export default SizeOptions; ProductScreen.js
import './ProductScreen.css'; import { useEffect, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; // Actions import { getProductDetails } from "../redux/actions/productActions"; //Components import { SizeOptions } from '../components/SizeOptions'; const ProductScreen = ({match}) => { const dispatch = useDispatch(); const productDetails = useSelector(state => state.getProductDetails); const { loading, error, product } = productDetails; const [ src, setSrc ] = useState("Default URL") return( <div className='sizebuttons'> {product && (product.size || []).map((size, index) => (<SizeOptions key={index} size= {size} changeSrc={src => setSrc(src)}/>))} </div> <model-viewer id="model-viewer" src={src} alt={product.productName} ar ar-modes="scene-viewer quick-look" ar-placement="floor" shadow-intensity="1" camera-controls min-camera-orbit={product.mincameraorbit} max-camera-orbit={product.maxcameraorbit} interaction-prompt="none"> <button slot="ar-button" className="ar-button"> View in your space </button> </model-viewer> )}; El único problema ahora es cómo hacer que la "URL predeterminada" sea realmente una URL, ya que si pongo {src} allí, dice que no puede hacer eso antes de que se represente el componente.