我正在使用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)听起来就像你需要的一样.