如何在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