Javascript Typescript:TypeError未定义

我对打字和反应相当陌生。我一直在尝试实现

react&trains

npm库，除了一个问题之外，我已经解决了所有问题

type Props = {}

class Surprisebutton extends Component<Props>{
    reward: any;

    render() {
        return (
            <Reward 
            ref={(ref) => { this.reward = ref }}
            type='memphis'>
                <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                    Surprise!
              <FavoriteIcon style={{ marginLeft: 10 }} />
                </Button>
            </Reward>
        )
    }
}

type Props={}
类惊奇按钮扩展组件{
奖励：任何；
render（）{
返回(
{this.reward=ref}}
type='孟菲斯'>
惊喜
)
}
}

---

运行

npm start

后，我得到一个错误，上面写着

TypeError:this.reward是未定义的

。解决问题的最佳方法是什么？

我可能错了，因为我从未使用过此软件包，而是根据文档/主题使用的。他们没有初始化

奖励

变量。试着删除它，这是固定版本

type Props = {}

class Surprisebutton extends Component<Props>{

render() {
    return (
        <Reward 
        ref={(ref) => { this.reward = ref }}
        type='memphis'>
            <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                Surprise!
          <FavoriteIcon style={{ marginLeft: 10 }} />
            </Button>
        </Reward>
    )
  }
}

type Props={}
类惊奇按钮扩展组件{
render（）{
返回(
{this.reward=ref}}
type='孟菲斯'>
惊喜
)
}
}

---

我可能又错了，但根据github页面，我认为这是我唯一可以推断的

它与TypeScript无关。TS只是一个编译器和linter，您将得到一个运行时错误。是这样的：

this.reward.rewardMe()

组件完全装载后，

ref

将被分配，并且

rewardMe（）

正在尝试立即调用它。这也是第二个错误。您不想使用

（）

调用，否则函数将立即启动（并且永远不会停止）

线路应该是

<Button onClick={this.reward.rewardMe} style={styles.button} variant="contained" color="primary">

---

将您的

onClick

更改为以下内容：

onClick={() => {this.reward.rewardMe()}}

---

感谢您提供的见解，我将检查此项并让您知道它是否有效。这似乎不起作用。Shivam，我得到

属性“奖励”在键入“惊喜按钮”时不存在。

错误。谢谢Andrew！当前选中此选项我得到的

属性“奖励”在类型“惊奇按钮”上不存在。

尝试此方法时也会出错。使用

raward:any将奖励声明为财产

before

render

似乎消除了编译器中的错误，但在运行

npm start

时，我仍然得到

TypeError:this.reward在浏览器中未定义

错误。您更改了

onClick

处理程序，但它仍然不起作用？库可能不接受

ref

prop<代码>类型“惊喜按钮”上不存在属性“奖励”是一个类型脚本类型定义

TypeError

是一个javascript错误。如果您没有单击按钮就立即得到了它，那么您忘记了更改单击句柄。实际上，我确实更改了

onClick

句柄。另外，这个实现直接来自他们的文档[我也看到了

ref={（ref）.

下的一个建议，其中指出

参数'ref'隐式地有一个'any'类型，但是可以从用法推断出一个更好的类型。

对不起，有一个示例将它与函数组件一起使用吗？