我目前正在使用preactJS开发一个小项目,并且使用algolia进行搜索。我发现reactJS有一个针对algolia的组件,但遗憾的是preactJS没有相关组件。我的问题是如何将algolia的javascript文件引入到preactJS中?
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
我目前正在使用preactJS开发一个小项目,并且使用algolia进行搜索。我发现reactJS有一个针对algolia的组件,但遗憾的是preactJS没有相关组件。我的问题是如何将algolia的javascript文件引入到preactJS中?
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
yarn add preact-head
然后就可以指定标准的头部元素,如脚本、元数据等。例如: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>
);
}
}
你可以动态插入脚本,尝试以下代码:
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);
},
var client = algoliasearch('app', 'key');
var index = client.initIndex('my_index');
algoliasearch
未定义。 - PPSheinalgoliasearch
。将此代码添加到script.onload = () => {// your code //}
块中。 - Nata Khitsannpm install algoliasearch --save
,并在模块中使用它,如下所示 -
import algolia from 'algolia';
然后在代码中使用其方法。你可以将它添加在 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>
index.js
中使用 require('../assets/instantsearch.min.js');
怎么样?或者尝试使用 CDN URL 而不是相对路径,但我不确定它是否有效。 - user6198643
React-InstantSearch
,但是当我渲染时,遇到了process
错误。这就是为什么我放弃它的原因。 - PPShein