在ReactJS中包装第三方JS库

Question

我正在尝试学习如何使用Google Map或BrainTree Dropin UI之类的第三方API，并使其成为ReactJS组件。

在我的研究中，我遇到了一个这样的项目示例，该项目包装了Braintree（支付网关）-https://github.com/Cretezy/braintree-web-drop-in-react/blob/master/src/index.js

不幸的是，我无法遵循代码，特别是，我无法理解第22-23行中的语法。它们看起来像装饰器，但我不确定和/或它们在这种情况下如何工作。

Answer 1

如何包装第三方库？

关于该主题的资源很多。您可以从第一个React官方文档开始-Integrating with Other Libraries。

还已经创建了带有您要求的库的React包装器/集成：

1. google-maps-react-使用React的声明性Google Map React组件。图书馆也有complete article how it works。
2. braintree-dropin-react-用于集成Braintree Drop-In UI（V3）的反应组件。

您提到的代码的目的是什么？

它只是property declaration。我想这里是为了清楚起见，但是不管有没有wrapper, instance声明，代码仍然会以相同的方式运行。

Answer 2

您正在谈论的代码如下：

class ... {
   ...

   wrapper;
   instance;

   ...
}

这只是一个不带值的属性声明，它与：

class ... {
   ...

   wrapper = undefined;
   instance = undefined;

   ...
}

如果完全删除它，实际上什么也不会发生。如果您进一步检查代码，则wrapper存储用于包装<div>的DOM参考，instance是componentDidMount中存储的Braintree实例。

ESLint规则可能会强制执行声明。