我如何从组件传输传输的道具？

Question

My code component is "Busket", in which I want transfer props from "Card" component:

import React from "react";
import s from "./Busket.css"
import styles from "../Main/MainContent.module.css"
import BusketCard from "./BusketCard";

function Busket() {
    return (
        <div className={styles.MainContent}>
            <button>+</button>
            <div className='busket ' >
                <BusketCard book={require('../../../images/book1.jpg')} title="Стивен Кинг - Будет кровь" cost="1500" />
                <ul>
                    <li className="busket__punktir_li">
                        <span>Итого:</span>
                        <div className="busket__punktir"></div>
                        <b>23542руб</b>
                    </li>
                    <li className="busket__punktir_li">
                        <span>Налог 5%:</span>
                        <div className="busket__punktir"></div>
                        <b>2542руб</b>
                    </li>
                </ul>
            </div>
        </div>
    );
}

export default Busket;

It's code's component "Catalog", from which I transfer props in another component "Card":

import React from "react";
import "./Catalog.css"
import s from "../Main/MainContent.module.css"
import 'macro-css';
import Card from "./Card.js"

function Catalog(props) {
    return (
        <div className={s.MainContent}>
            <div className="wrapper d-flex clear justify-between m-50">
                <Card  img={require('../../../images/book1.jpg')} title="Стивен Кинг - Будет кровь" cost="1500" />
                <Card  img={require('../../../images/book2.jpg')} title="Джули Кагава - Лисья Тень" cost="1300" />
                <Card  img={require('../../../images/book3.jpg')} title="Джек Лондон - Белый Клык" cost="1400" />
                <Card  img={require('../../../images/book4.jpg')} title="Говард Лавкрфт - Хребты Безумия" cost="1100" />

            </div>
            <div className="wrapper d-flex clear justify-between m-50">
                <Card  img={require('../../../images/book5.jpg')} title="Стивен Кинг - Как писать книги" cost="2000" />
                <Card  img={require('../../../images/book6.jpg')} title="Рэй Брэдбери - Надвигается Беда" cost="1700" />
                <Card  img={require('../../../images/book7.jpg')} title="Оливер Сакс - Человек, который принял жену за шляпу" cost="1000" />
                <Card  img={require('../../../images/book8.jpg')} title="Оливье Гез - Исчезновение Йозефа Менгеля" cost="1800" />
            </div>
        </div>
    );
}

export default Catalog;

The code component takes props from "Catalog" and from there I want transfer props:

import React from "react";
import "./Catalog.css"
import 'macro-css';
import Busket from "../Busket/Busket.js"

function Card(props){
    const [comlete, setComplete] = React.useState(false)

    const handleComplete = () => {
        setComplete(!comlete)
        {setComplete ? Busket.props = props : Busket = []}
    }
return(
    <div>
        <div className="card">
            <img width="200px" height="250px" src={props.img} />
            <h5>{props.title}</h5>
            <div className="d-flex align-center justify-between">
                <div>
                    <p>Цена:</p>
                    <b>{props.cost}руб</b>
                </div>
                <button className="Catalog__btn" onClick={handleComplete}><img width='10px' height='10px' src={comlete ? require("../../../images/complete.png") : require("../../../images/plus.jpg") }/></button>
            </div>
        </div>
    </div>
)

}

export default Card;

I try take props but I got (blank object):

{}

[[Prototype]]

Answer 1

I think you should do something like this inside your handleComplete method:

const handleComplete = () => {
  setComplete(!comlete)
  {setComplete ? <Busket {...props} /> : <Busket />}
  // or
  // {setComplete ? <Busket {...props} /> : null}
}