从类外部调用方法（React.js）答案

【问题标题】：calling a method from outside of class (React.js)从类外部调用方法（React.js）
【发布时间】：2021-01-30 00:09:16
【问题描述】：

这是我的例子： https://codesandbox.io/s/test-uz-713xy 正如你在这个相当不错的例子中看到的，我尝试将 2 个不同的方法分配给 2 个不同的按钮（“skyfall”和“vileMurder”）。

但是这些方法是从我的班级之外调用的，因此无法正确识别它们，我收到以下错误消息：skyFall is not defined 或vileMurder is not defined

有人知道如何帮我解决这个问题吗？

【问题讨论】：

【解决方案1】：

这些函数确实没有在您调用它们的范围内定义。这可以通过两个步骤解决：

              <IsHeStillAlive
                skyFall={this.skyFall}
                vileMurder={this.vileMurder}
                panel={panel}

并将映射函数更改为采用 lambda 而不是 function，因为函数将自己的 this 变量绑定到函数上下文。

this.state.data.map((panel) => {

 <Button onClick={() => props.vileMurder()}>
 ...
 <Button onClick={() => props.skyFall()}>

上述更改足以识别和执行功能，但还有其他错误，也与this 的上下文有关。我建议你阅读the MDN doc about this。

您也可能有兴趣将您的组件转换为react hooks。虽然这不是强制性的，但现在这是定义组件的推荐方式，它可以防止大多数上下文绑定问题发生。

【讨论】：