将货币选择菜单中的货币转换应用到我的预算应用的其他部分

Question

我在做一个JS项目，是为一个在线课程创建一个预算管理应用。我的应用包含以下组件：

预算（Budget）
剩余金额（Remaining）
已花费金额（Spent so far）
分配的预算（Allocated Budget）
改变预算分配（Change Allocation）

我被要求为该应用添加第6个组件“CurrencyDropdown”，用于提供不同货币选项供用户选择，我已经完成了这个组件。

// CurrencyDropdown.js

import React, { useState } from 'react';

const CurrencyDropdown = () => {
  const [selectedCurrency, setSelectedCurrency] = useState('$'); // 默认货币为美元

  const handleCurrencyChange = (event) => {
    setSelectedCurrency(event.target.value);
  };

  return (
    
      货币：
      
    
  );
};

export default CurrencyDropdown;

接下来的任务是在项目中添加代码，使得当从CurrencyDropdown更改货币时，应用中其他所有组件显示的货币也随之改变。这是让我卡住的地方。

我尝试创建一个新的JS组件CurrencyContext：

// CurrencyContext.js

import React, { createContext, useContext, useState } from 'react';

const CurrencyContext = createContext();

export const CurrencyProvider = ({ children }) => {
  const [selectedCurrency, setSelectedCurrency] = useState('USD');

  const changeCurrency = (currency) => {
    setSelectedCurrency(currency);
  };

  return (
    
      {children}
    
  );
};

export const useCurrency = () => {
  return useContext(CurrencyContext);
};

我不清楚如何或在哪里应用这个上下文组件来影响整个应用中的货币单位变化。

gdoron · Answer

为了在整个应用程序或相关部分中使用CurrencyProvider和useCurrency，您需要将整个应用程序或其相关部分用CurrencyProvider包裹起来。这样，所有嵌套在其中的组件都可以访问到selectedCurrency和changeCurrency。

// index.js

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

像这样用currencyProvider包裹整个应用，这将会在整个应用范围内产生货币单位变更的效果。

Pavel Minaev · Answer

为了使用你创建的CurrencyContext.js，请将你的应用程序用包裹起来。

示例：

这样可以让其他组件使用你提供的货币上下文。请注意，所有使用CurrencyContext的组件都应作为CurrencyProvider的子组件。

现在你可以在CurrencyDropdown.js中使用selectedCurrency和changeCurrency了：

// CurrencyDropdown.js

import React, { useState } from "react";
import { useCurrency } from "./CurrencyContext"; // 注意导入路径应指向CurrencyContext.js文件

const CurrencyDropdown = () => {
  const { selectedCurrency, changeCurrency } = useCurrency();

  const handleCurrencyChange = (event) => {
    changeCurrency(event.target.value);
  };

  return (
    
      货币：
      
    
  );
};

export default CurrencyDropdown;

而在其他如Remaining.js等组件中，你现在可以使用selectedCurrency：

// Remaining.js

import React from "react";
import { useCurrency } from "./CurrencyContext"; // 注意导入路径应指向CurrencyContext.js文件

const Remaining = () => {
  const currencyRemaining = 100;
  const { selectedCurrency } = useCurrency();
  return (
    
      剩余: {selectedCurrency} {currencyRemaining}
    
  );
};

export default Remaining;