React 组件中的 Twilio Script 标签

Question

我正在尝试将 Twilio 脚本标签用于国际国家/地区列表下拉列表，我正在按照此 twillio 指南进行操作。但是，我到了一个地步，它显示了一个步骤，我必须在 html 文件中包含一个脚本（对我来说，它是 index.html，它是 React 的根文件）并使用来自window 对象。

这是指南中的片段：

这里的问题是本指南是根据常规 html、css 和 javascript 而不是 React/JSX 文件制作的。有什么办法可以在反应文件中处理这个问题吗？这是文档，以防你们需要看一看。谢谢！

Answer 1

这里是 Twilio 开发人员布道者。

intl-tel-input 项目最初是为 jQuery 构建的，但不再依赖于它。所以它并不是真正为 React 编写的，尽管它可能会与一些工作集成。

然而，有一个项目在 React 中重新实现了 intl-tel-input，它叫做 react-intl-tel-input，可能就是您正在寻找的东西。

您可以使用

安装它

npm install react-intl-tel-input

并通过导入组件及其 CSS:

在您的 React 项目中使用它

import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

然后使用 <IntlTelInput> 组件：

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
/>

Twillio Script tags in React component