如何在PreactJS中包含外部JavaScript库？

Question

我目前是一个基于preactJS和algolia的小型项目？ 我发现有针对reactjs的algolia组件，但是不幸的是，没有针对preactjs的algolia组件。 这就是为什么我的问题是如何将algolia javascript文件包含到preactjs中？

<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>

Answer 1

Preact具有组件Head。 要安装它运行

yarn add preact-head

这样就可以指定标准的head元素，例如脚本，meta等。例如app.js

import Head from "preact-head";

export default class App extends Component {

        render() {
            return (
                <div id="app">
                    <Head>
                        <meta name="Whatever" />
                        <script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
                    </Head>

                </div>
            );
        }
    }

Answer 2

您可以动态插入脚本，请尝试以下操作：

componentWillMount() {
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js";
    script.async = true;

    script.onload = function() {
       // init your algolia code here
    }

    document.body.appendChild(script);
},

Answer 3

您可以将其添加到head标签之间的index.html中。 在React中，index.html在public/index.html在Preact中，index.html在src/index.html

<head>
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
</head>

Answer 4

您可以安装软件包algoliasearch （如果软件包不正确，请在https://npmjs.com上搜索所需的软件包）

现在您可以执行npm install algoliasearch --save在根目录下保存package.json并在模块中使用它，如下所示-

import algolia from 'algolia';

然后在您的代码中使用其方法。

如何在PreactJS中包含外部JavaScript库？

问题描述

4 个解决方案

解决方案1
4 2018-04-06 13:28:54

解决方案2
2 已采纳 2017-08-16 08:52:23

解决方案3
0

解决方案4
0 2019-01-15 09:44:09

如何在PreactJS中包含外部JavaScript库？

问题描述

4 个解决方案

解决方案1 4 2018-04-06 13:28:54

解决方案2 2 已采纳 2017-08-16 08:52:23

解决方案3 0

解决方案4 0 2019-01-15 09:44:09

解决方案1
4 2018-04-06 13:28:54

解决方案2
2 已采纳 2017-08-16 08:52:23

解决方案3
0

解决方案4
0 2019-01-15 09:44:09