Javascript 使用React路由器时将道具传递给另一个组件，下面将作进一步解释

下面是我的

主页

组件的代码，其中我有一个

钱

变量，我想将它作为道具传递给我的

，但我无法这样做

import React,{useState} from 'react';
import {Container,Row,Col,Button} from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
import './Home.css';

function Home(props){
    
    const history = useHistory();
    const initValues = ['50 Millions','100 Millions','1 Billion','2 Billions','5 Billions','10 Billions',
'50 Billions','100 Billions','500 Billions'];
    
    const [values,setValues] = useState(initValues);
    const [money,setMoney] = useState(0);
    function handleSubmit(e){
        const {name} = e.target;
      
        if ( name === '50 Millions'){ 
            setMoney( numberWithCommas(50000000) ) }
        if ( name === '100 Millions'){ 
            setMoney(numberWithCommas(100000000)); }
        if ( name === '1 Billions'){
             setMoney(numberWithCommas(1000000000)); }
        if ( name === '2 Billions'){
             setMoney(numberWithCommas(2000000000)); }
        if ( name === '5 Billions'){
             setMoney(numberWithCommas(5000000000)); }
        if ( name === '10 Billions'){
             setMoney(numberWithCommas(10000000000)); }
        if ( name === '50 Billions'){
             setMoney(numberWithCommas(50000000000)); }
        if ( name === '100 Billions'){
             setMoney(numberWithCommas(100000000000)); }
        if ( name === '500 Billions'){
             setMoney(numberWithCommas(500000000000)); }

     history.push('/play');


    }
  
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }


  return  <Container className='justify-content-center'>
      <Row className='justify-content-center'>
      <div className="outer-div">
        <h4 className='prompt-intro'> Choose How much money do you want to have.</h4>
        
        {
            values.map( (value,i) => {
                return <Button className='money-btn btn-lg' variant='primary'  type='submit' onClick={handleSubmit} name={value}>{value}</Button>
            })
        }
   
    </div>
    </Row>
     </Container>
    

    
}

export default Home;

import React，{useState}来自“React”；
从“react bootstrap”导入{容器、行、列、按钮}；
从'react router dom'导入{useHistory}；
导入“/Home.css”；
功能主页（道具）{
const history=useHistory（）；
常量初始值=['5000万'、'1亿'、'10亿'、'20亿'、'50亿'、'100亿'，
“500亿”、“1000亿”、“5000亿”]；
const[values，setValues]=useState（initValues）；
const[money，setMoney]=useState（0）；
函数handleSubmit（e）{
const{name}=e.target；
如果（名称==“5000万”）{
设置货币（带逗号的数字（50000000））}
如果（名称==“1亿”）{
setMoney（带逗号的数字（100000000））；}
如果（名称=='1十亿'）{
设置货币（带逗号的数字（100000000））；}
如果（名称=='20亿'）{
setMoney（带逗号的数字（2000000））；}
如果（名称==“50亿”）{
setMoney（带逗号的数字（5000000000））；}
如果（名称==“100亿”）{
设置货币（带逗号的数字（1000000000））；}
如果（名称==“500亿”）{
setMoney（带逗号的数字（50000000000））；}
如果（名称==“1000亿”）{
设置货币（带逗号的数字（10000000000））；}
如果（名称==“5000亿”）{
setMoney（带逗号的数字（500000000000））；}
history.push（'/play'）；
}
带逗号的函数编号（x）{
返回x.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g'，，'）；
}
返回
选择你想要多少钱。
{
values.map（（值，i）=>{
返回{value}
})
}
}
导出默认主页；

只需在

主页

组件中使用

，并在

播放

组件中通过

道具访问变量。钱

我不在主页中调用，因为我不需要调用它。如果不调用该组件，则无法传递道具。然后，您应该尝试使用React的上下文API，并在此组件中更新变量的值，并从上下文中访问变量。所以，每当上下文中的变量发生更改时，它也会自动重新渲染组件。