Question

我想在我的React应用程序中包括一个Skyscanner窗口小部件。

https://partners.skyscanner.net/affiliates/widgets-documentation/basic-and-location-widgets

<div data-skyscanner-widget="BasicWidget" data-locale="en-GB" data-params="colour:glen"></div>
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

由于脚本存储在外部，我该如何将其集成到我的react应用程序中。

谢谢。

Answer 1

有几种方法可以将外部脚本包含到RIA中。

load-script库（https://www.npmjs.com/package/load-script）。这可以帮助您动态加载脚本。您可以在安装后创建一个特殊的组件并加载脚本：

class ScyScanner extends Component {
  componentDidMount() {
    loadScript('URL')
  }
  render() {
    return (
      <div data-skyscanner-widget="BasicWidget" data-locale="en-GB" data-params="colour:glen"></div>

    )
  }
}

下一步是在skyscanner-widget文档中手动为index.html创建标签，并通过添加external标签来附加script脚本。它更简单，但灵活性更低。
此外，您还可以创建一个函数帮助器，以在调用外部脚本后立即动态加载该外部脚本：

export function loadExternalScripts() {
  if (env === 'production') loadScript('URL')
}

-然后，您的脚本可以根据环境执行加载脚本。

当您有指向JS loader（https://widgets.skyscanner.net/widget-server/js/loader.js）的链接时。这意味着您不在乎脚本版本。

Answer 2

您将不得不将此脚本标签添加到您的.hmtl文件中：

<script src="https://widgets.skyscanner.net/widget-server/js/loader.js"></script>

然后您可以尝试使用此组件：

class MyWidget extends React.Component {

  componentDidMount() {

    window.skyscanner.widgets.load();

  }

  render() {
    return (
      <div
        data-skyscanner-widget="FlightSearchWidget"
        data-locale="en-GB"
      />
    )
  }
}

它将在生产和开发模式下工作。

fiddle

将Skyscanner小部件与React集成

2 个答案: