我正在使用ReactJS Router渲染我的网站服务器端 我的许多组件都会进行REST调用以生成内容.此内容不会作为HTML服务器端发送,因为它是异步调用. 一个看起来像这样的组件: import React from
我的许多组件都会进行REST调用以生成内容.此内容不会作为HTML服务器端发送,因为它是异步调用.
一个看起来像这样的组件:
import React from 'react'
import ReactDOM from 'react-dom'
// Imports omitted
export default class MyPage extends React.Component {
constructor() {
super();
this.state = {items: []};
fetch("http://mywebservice.com/items").then((response) => {
response.json().then((json) => {
this.setState({items: json.items})
}).catch((error) => {});
});
}
render() {
if (this.state.items && this.state.items.length > 0) {
var rows = [];
// Go through the items and add the element
this.state.items.forEach((item, i) => {
rows.push(<div key={item.id}></div>);
});
return <div>
<table>
{rows}
</table>
</div>;
}
else {
return <span>Loading...</span>
}
}
}
搜索引擎将索引“正在加载…”,而我显然希望我的元素(项目)被索引.有办法解决这个问题吗?
Checkout react-async( https://www.npmjs.com/package/react-async)或react-async-render( https://www.npmjs.com/package/react-async-render)听起来就像你需要的一样.
