Reactjs 将金额从按钮向下传递到；“支付”；组成部分

我在一个组件中有一个按钮，该按钮保存{obj.amount}中的金额，我希望将该金额传递给PayView'amount'参数。因为“onPress”位于页脚组件上，所以它将我带到payview组件。我如何解析下面的金额

 export default class FooterComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
    const {navigate} = this.props.navigation;
    //gas items
    const gas=[{
        title:"4kg",
        icon:"car",
        amount:'800',
    },
    {
        title:"12.5kg",
        icon:"car",
        amount:'4000',
    },
    {
        title:"26kg",
        icon:"car",
        amount:'8000',
    },
    ]
    return(
        <Footer style={{marginBottom:10,height:75}}>
            <FooterTab >
               {
                   gas.map((obj,index)=>{
                       return(
                           <Button key={index}  onPress={() => navigate('Landing')}>
                                <Icon size={37} name={obj.icon} />
                                <Text style={{fontSize:12}}>{obj.title}</Text>
                                <Text>{'\u20A6'}<Text style={{fontSize:13,fontWeight: 'bold',color:'#FFFFF'}}>{obj.amount}</Text></Text>
                            </Button>
                       )
                   })
               }
            </FooterTab>
        </Footer>
    )

}
}

导出默认类FooterComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{navigate}=this.props.navigation；
//煤气项目
恒压气体=[{
标题：“4kg”，
图标：“汽车”，
金额：'800'，
},
{
标题：“12.5公斤”，
图标：“汽车”，
金额：'4000'，
},
{
标题：“26公斤”，
图标：“汽车”，
金额：'8000'，
},
]
返回(
{
gas.map（（对象，索引）=>{
返回(
导航（'Landing'）}>
{obj.title}
{'\u20A6'}{obj.amount}
)
})
}
)
}
}

我有这个组件

class  Landing  extends  React.Component { 

      render() {
          return (
              <PayView 
              buttonText=  "Pay Now"
              amount={120000}

             />
     );
     }
}
export default Landing;

类登录扩展了React.Component{
render（）{
返回(
);
}
}
导出默认着陆；

然后将登陆解析为付款，然后在StackNavigator中引用

export default function Payment() {


  return (

    <Landing  />

  );
}

导出默认功能付款（）{
返回(
);
}

您需要做的是将状态提升到最近的公共组件

在公共组件中创建一个状态变量，通过props向下传递一个函数，以更改按钮组件的状态，该函数将在金额更改时调用该函数。将实际状态值向下传递到PayView组件

由于状态位于父组件中，因此每当状态发生更改时（即使是由子按钮组件更改），React将触发从父组件向下的组件树渲染，并使用新金额更新按钮和PayView组件

编辑：

function Parent() {
  const [amount, setAmount] = useState();
  return (
    <Button onPay={setAmount} />
    <PayView amount={amount} />
  );
}

function Button({ onPay }) {
  return <button onClick={() => onPay(100)}>Pay!</button>;
}

function PayView({ amount }) {
  return (typeof amount === "number") ? (
    <div>Paying {amount}...</div>
  ) : (
    <div>Ready to pay</div>
  );
}

函数父函数（）{
const[amount，setAmount]=useState（）；
返回(
);
}
功能按钮（{onPay}）{
支付回报（100）}>支付！；
}
函数PayView（{amount}）{
返回（金额类型==“编号”）(
正在支付{amount}。。。
) : (
准备付款
);
}

我从对您的问题的描述中了解到，您希望能够将状态向上推，并将其访问到

组件

对于这种用例，您可能需要一个公共的中心状态，可以访问订阅该状态的所有组件。 简而言之，Redux、flux或ContextAPI

但是如果你不想使用任何一个，那么你可以使用

useRef

hook。（如果您使用的是React 16.8+）或

createRef

，然后可以访问该引用的

current

属性中的状态

检查控制台。

---

我可以举个例子吗，我对react-Native很陌生这是react的基本概念之一，请参见如何提升状态：，以及如何保持状态：。有一个非常基本的示例使用了新的函数组件语法和挂钩，而不是类组件。父级保存状态，并将重新渲染并将其传递给子级。在尝试实施诸如支付系统之类的敏感系统之前，我建议您尝试更好地理解它。