[英]How can I use the hook's value from one jsx to other
I am making a cart and when we click Add to cart then the number increases this is done using hooks and is in the following Pricetag.jsx我正在制作购物车,当我们单击添加到购物车时,数字会增加,这是使用钩子完成的,位于以下 Pricetag.jsx
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
Now I want to use the value of count in other jsx现在我想在其他 jsx 中使用 count 的值
import React from 'react'
import './Body.css'
import image2 from './assets/cake9.jpeg'
import image9 from './assets/cake16.jpeg'
import Pricetag from './Pricetag'
export default function Body(props) {
return (
<>
<div className="headingbody">
<div></div>
{props.title}
</div>
<div className="cart">
<div className="number34"> ** here I want to show my count **</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image10} name="Swimming cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image11} name="Rossy cake" bold="Rs 345" cut="Rs 634" />
</div>
</>
)
}
Can you tell me how can I use the value of count from the first to second?你能告诉我如何使用从第一个到第二个的计数值吗?
There are a few ways you can use:您可以使用以下几种方法:
You have to pass the count state to the other JSX file (component).您必须将计数state 传递给另一个 JSX 文件(组件)。 There are some ways:
有一些方法:
brother, you can find the description and idea from the below document of useContext API calling and its functionaloty兄弟,你可以从下面的useContext API调用及其功能文档中找到描述和想法
https://www.geeksforgeeks.org/reactjs-usecontext-hook/ https://www.geeksforgeeks.org/reactjs-usecontext-hook/
https://reactjs.org/docs/hooks-reference.html#usecontext https://reactjs.org/docs/hooks-reference.html#usecontext
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.