如何将钩子的值从一个 jsx 使用到另一个

Question

我正在制作购物车，当我们单击添加到购物车时，数字会增加，这是使用钩子完成的，位于以下 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>
  )
}

现在我想在其他 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>

    </>
  )
}

你能告诉我如何使用从第一个到第二个的计数值吗？

Answer 1

您可以使用以下几种方法：

• state 管理：redux，zustand，...
• 使用反应上下文
• 你可以通过道具传递价值，但它会导致“地狱道具”

Answer 2

您必须将计数state 传递给另一个 JSX 文件（组件）。 有一些方法：

1. 导入 JSX 文件并调用 Pricetag.jsx 中的组件，然后将count作为 prop 传递。
2. 如果您无法使用 Pricetag.jsx 中的组件，请使用 state 管理解决方案，如 Context API、Redux、MobX 等。

Answer 3

兄弟，你可以从下面的useContext API调用及其功能文档中找到描述和想法

https://www.geeksforgeeks.org/reactjs-usecontext-hook/

https://reactjs.org/docs/hooks-reference.html#usecontext