加载外部反应到html文件
[英]Loading external react into html file
问题描述
我想从Contentful创建一个UI扩展，添加来自Algolia数据库的标记。 我正在尝试将外部React.js文件加载到html文件中，并且我的浏览器中没有任何内容。 我正在使用Chrome浏览器来运行我的代码。
我试图将代码直接放入html文件中，并且我的浏览器中没有显示任何内容。 只显示的代码是不在<script>标记中的<p> <script>标记。
<!DOCTYPE html>
<html>
<head>
<title>Tag Extension</title>
<meta charset="utf-8" />
<!-- Contentful's default styles -->
<link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
<!-- UI Extensions SDK -->
<script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
</head>
<body>
<div id="root">
<p>Hello World</p>
</div>
<script type="text/javascript" src="./index.js">
</script>
</body>
</html>
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { init } from 'contentful-ui-extensions-sdk';
import '@contentful/forma-36-react-components/dist/styles.css';
import './index.css';
import algoliasearch from "algoliasearch";
import algoliasearchHelper from "algoliasearch-helper";
import dotenv from 'dotenv';
dotenv.config() // ensures that .env is used
class App extends React.Component {
detachExternalChangeHandler = null;
static propTypes = {
sdk: PropTypes.object.isRequired,
};
/**
* Perform an algolia request, returning data on success, error on failure.
*
* @param {string} index - The index we are going to load data from.
* @param {any} options - Options sent to algolia, can contain filters, hitsPerPage, etc.
* @param {string} query - An optional query string to pass to the search helper.
* @param {int} page - The page we are on, defaults to 0 (first page).
* @returns Promise - returns promise that resolves when the data is retrieved, rejecting on error.
*/
static fetchFromAlgolia(index, options, query, page) {
// example options
// {
// hitsPerPage: 10,
// filters: objectID:123 OR objectID:456
// }
const client = algoliasearch(
process.env.REACT_APP_INSTANTSEARCH_APP_ID,
process.env.REACT_APP_INSTANTSEARCH_API_KEY
);
if (!page) {
page = 0;
}
const helper = algoliasearchHelper(client, index);
return new Promise((resolve, reject) => {
if (query !== undefined) {
helper.setQuery(query).setPage(page).searchOnce(options, (error, data, state) => {
// console.log(error, data, state, 'error data and state');
if (error) {
reject({
status: 404,
message: "There was an error loading the content.",
error: error
});
} else {
resolve(data, state);
}
});
} else {
helper.setPage(page).searchOnce(options, (error, data, state) => {
// console.log(error, data, state, 'error data and state');
if (error) {
reject({
status: 404,
message: "There was an error loading the content.",
error: error
});
} else {
resolve(data, state);
}
});
}
});
}
constructor(props) {
super(props);
this.state = {
value: props.sdk.field.getValue(),
error:false,
hasLoaded:false,
items:[]
};
}
componentDidMount() {
this.props.sdk.window.startAutoResizer();
// Handler for external field value changes (e.g. when multiple authors are working on the same entry).
this.detachExternalChangeHandler = this.props.sdk.field.onValueChanged(
this.onExternalChange
);
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then( items => {
this.setState({
hasLoaded:true,
items
});
},
(error) => {
this.setState({
hasLoaded:true,
error:error
})
}
)
}
componentWillUnmount() {
if (this.detachExternalChangeHandler) {
this.detachExternalChangeHandler();
}
}
onExternalChange = value => {
this.setState({
...this.state,
value
});
};
onChange = e => {
const value = e.currentTarget.value;
this.setState({
...this.state,
value });
if (value) {
this.props.sdk.field.setValue(value);
} else {
this.props.sdk.field.removeValue();
}
};
handleSearch = () => {
const tagIndex = process.env.REACT_APP_TAGS_INDEX;
const hitsPerPage = 3;
const options = { hitsPerPage };
SearchUtil.fetchFromAlgolia(tagIndex, options, this.state.value)
.then((data, state) => {
this.setState({
...this.state,
items: data
});
})
.catch(error => {
console.log(error, 'there was an error');
});
}
render() {
console.log(this.state, 'data and state in callback');
return (
<div>
<ul>
{this.state.items.map(item => {
<li>{item.name}</li>
})}
</ul>
</div>
);
}
}
init(sdk => {
ReactDOM.render(<App sdk={sdk} />, document.getElementById('root'));
});
1 个解决方案
解决方案1
0 2019-04-05 17:39:38
外部CSS文件未加载到HTML文件中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.