[英]How to pass child prop to parent?
我有一些作为子组件的动态按钮,并根据我的 MongoDB 分配了一个value="URL"
。 我如何将生成的值传递给我的父/网络组件src={currentSrc}
? 当我分配它时,它说 currentSrc 未定义?
这是SizeOptions
:
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>
);
};
这是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>
)}
渲染的按钮:
我的ProductScreen
有更多代码,我只是尽量将其最小化,以便更轻松地帮助我弄清楚! 任何帮助将不胜感激!
好消息! 经过无数次的尝试,我终于弄明白了。
所以为了从孩子传给父母,这就是我想出的:
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>
)};
现在唯一的问题是如何使“默认 URL”实际上成为现在的 URL,如果我将{src}
放在那里,它说在呈现组件之前它不能这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.