是否可以从 React Class 组件到功能组件进行 prop drilling?

Is it possible to do prop drilling from React Class Component to Functional Component?

我目前正在编写一些 React Class 组件代码,并且想进行道具钻取以允许子功能组件调用父组件中的警报功能。 具体来说,我正在做以下事情: 在这个 class 构造函数中,我进行了绑定: this.setPtbrRequestAlert = this.setPtbrRequestAlert.bind(this);

在传递道具功能的部分,我这样做了:

但是,在子组件中,传递的 props 被解构了,但我无法在功能组件中使用它们,因为找不到这些 props。

有人能解释一下这个道具钻有什么问题吗?为什么我无法通过在功能性子组件中对它们进行去结构化来引用这些值,是否有解决方法?

我知道有人可能想建议将所有代码重构为功能组件,但我现在尽量不要乱用 Prod 代码。我想用功能组件优雅地实现新功能,并在未来逐步重构旧代码。 提前致谢!

您已经编写了重命名子组件内的道具的代码。当您这样做时:

({setAlertCallback: AlertCallbackFunction, userId: any}) => {

这不是打字稿,而是通过重命名进行解构。相当于:

(props) => {
  let AlertCallbackFunction = props.setAlertCallback;
  let any = props.userId

因此,当您尝试与 setAlertCallback 互动时,您无法进行互动,因为您已将其重命名为 AlertCallbackFunction

你想做:

({ setAlertCallback, userId }: {setAlertCallback: AlertCallbackFunction, userId: any}) => {