Javascript 在多个组件中使用变量进行反应

我有一个产品组件，它有一个“添加到购物车”按钮，当我单击“添加到购物车”时，它会将产品添加到购物篮并合计购物篮的成本，如何在不同组件中使用

totalCost

和

nameArr

变量

我希望能够创建一个篮子组件，该组件传入

nameArr

变量以显示用户篮子中有哪些项目，以及

totalCost

变量以显示用户必须支付的金额

实现这一目标的最佳方式是什么

我将如何实现这一点

var nameArr = []; 
var costStr = ""; 
var costArr = []; 
var totalCost = 0;
export default function Product(props) {
  const handleClick = (e) => {
    totalCost = 0;
    nameArr.push(`${props.name}`);
    costStr += `${props.price}, `;
    costArr = costStr.split`,`.map((x) => +x);
    for (var i = 0; i < costArr.length; i++) {
      totalCost += costArr[i];
    }   
    console.log(
            `${props.name} added to basket at price of £${props.price}\nbasket: ${nameArr}\ntotal: £${totalCost}`
    );  
  };  
  return (
    <div className={styles.product}>
      <Link href={props.link}>
        <img src={props.img} alt={props.name} />
      </Link>
      <Link href={props.link}>
        <h3>{props.name}</h3>
      </Link>
      <span>{props.price}</span>
      <button onClick={handleClick}>Add to Bag</button>
    </div>
  );  
}

var nameArr=[]；
var costStr=“”；
var-costArr=[]；
var总成本=0；
导出默认功能产品（道具）{
常量handleClick=（e）=>{
总成本=0；
nameArr.push（`${props.name}`）；
costStr+=`${props.price}，`；
costArr=costStr.split`、`.map（（x）=>+x）；
对于（变量i=0；i

通常情况下，您会使用某种状态管理工具，如Redux，但如果这对该项目来说有点过分，您可以将函数作为道具传递给其他组件，并在组件外部更改状态。ReactJS官方网站在这方面有一些非常好的文档，我建议你仔细阅读并学会自己实现

在React中提升状态：

---

如果将函数用作组件，则可以使用钩子来更新状态：

您只需使用这些变量创建一个新文件，并在所需的每个组件中引用它。

我将继续阅读，它是一个用于在组件之间共享数据的内置API。您可以将共享数据存储在上下文中，并提供更新方法，然后将其传递给使用它的所有组件。还有其他解决方案，如Redux或其他Flux实现，但它并不特别适合较小的项目。