React 组件中的 Twilio 脚本标签

【问题标题】：Twillio Script tags in React componentReact 组件中的 Twilio 脚本标签
【发布时间】：2021-11-19 06:38:41
【问题描述】：

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

这是指南中的 sn-p：

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

【问题讨论】：

【解决方案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"
/>

【讨论】：