如何将 child 属性传递给 parent？

Question

我有一些动态按钮是 child 组件，并根据我的 MongoDB 分配了一个 value="URL"。如何将生成的值传递给我的 parent/web 组件 src={currentSrc}？我赋值的时候说currentSrc is not defined?

这是 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 中有更多代码，我只是尽量将其最小化，以便更容易帮助我解决问题！任何帮助将不胜感激！

Answer 1

好消息！经过多次尝试，我终于弄明白了。

所以为了从 child 传递到 parent 这就是我想出的：

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>
)};

现在唯一的问题是如果我把 {src} 放在那里，如何使“默认 URL” 实际上成为 URL，它说以前不能这样做组件已渲染。

如何将 child 属性传递给 parent？

How to pass child prop to parent?

html

javascript

mongodb

reactjs

mern