时间戳

首页 > 解决方案 > React 将组件的 props 作为函数变量传递

reactjs - React 将组件的 props 作为函数变量传递

问题描述

我正在尝试制作一个答题器游戏，但我对它的了解并不多，但是我对 React 有一些不理解的地方。

我已经制作了一个可以工作的点击按钮，并且我正在尝试制作一个升级按钮，但问题是它增加了点击的力量，但它不会从玩家身上带走任何金币。

我怎样才能使它减去点击成本？

https://stackblitz.com/edit/react-tyfwft

标签： reactjsjsx

解决方案

所以你有点接近，你不能使用这样的道具。this.props将始终是对您所在组件的道具的引用 - 而不是调用函数的道具。

您想要做的是更新您的 handleGold/handleUpgrades 函数以获取一个参数，该参数将是您传递的价格道具，例如：

<Upgrade price = {5} handleGold = {(price) => this.handleUpgrades(price)}/>

&

handleUpgrades(price) {
    let newGold = this.state.gold - price;
    let newPower = this.state.power++;
    if ( this.state.gold >= price) {
      this.setState({
        gold : newGold,
        power : newPower,
      });
    }
  }

最后，在您的升级组件中，只需将价格从道具传递到该函数：

<button onClick = {() => this.props.handleGold(this.props.price)}>

推荐阅读