我想创建一个具有客户端和服务器端呈现的反应应用程序。
以下是示例:
import styles from './Main.css';
import React, {Component} from 'react';
import Info from './Info/Info';
import Record from './Record/Record'
export default class Main extends Component {
render() {
return (
<div className={styles.main}>
<div className={styles.mainIn + ' clearfix'}>
<div className={styles.mainLeft}>
<Info info_num="2012201972"/>
</div>
<div className={styles.mainRight}>
<div className="clearfix mb20">
<Record />
</div>
</div>
</div>
</div>
)
}
}
在此组件Main
中,需要在客户端呈现,<Record />
除外
组件Record
import styles from './Record.css';
import layout from '../../shared/styles/layout.css'
import React, {Component} from 'react';
export default class Record extends Component {
render() {
return (
<div className="float_two">
<div className={layout.box + ' mr10'}>
This is Record!
</div>
<div>
)
}
}
这是我的问题:
我搜索了一些使用ReactDom.renderToString
和react-router
的服务器端呈现示例的示例。但是,没有客户端和服务器端呈现的教程。
我想要实现的是,客户端首先加载并呈现组件<Main />
,然后从服务器端加载<Record />
。
另一个问题是,如何使用renderToString加载样式模块Record.css,因为我认为在这个renderToString中只能加载html而不是css。
答案 0 :(得分:2)
当人们提到服务器端渲染时,他们通常是指某个路径上的顶级应用程序的初始渲染,而不是单个组件。
我无法理解您的用例是针对您的要求。您的React应用程序是Fragments
的一个大树,因此渲染单个组件服务器端并不真正有意义。如果你想让Record
成为React的一部分,那么客户端需要了解它,那么为什么不按照惯例在客户端进行渲染呢?
如果你真的需要渲染服务器端,那么我猜你可以构建Record组件,以便它执行AJAX请求,然后返回的html可以使用https://facebook.github.io/react/tips/dangerously-set-inner-html.html呈现,但我不推荐它
我的猜测是Record
需要来自服务器端的某种数据,这就是为什么要在那里呈现它?相反,只需将数据作为JSON获取并使用它来呈现组件客户端。
阅读完你的评论后,我知道你要做什么。你想要的是从服务器动态加载内容(不是渲染的html)以响应某些事件(滚动,按钮点击或其他)。 React非常擅长这个。通过更改应用程序的状态(即记录的内容),React将有效地重新渲染。
这是一个非常简单的应用程序。它首先要有两个应该渲染的项目(foo和bar)。响应一个动作(在这种情况下按钮点击),更多数据被加载到状态,从而呈现给页面。您需要做的就是修改它,以便代替setTimeout
对您的后端进行AJAX调用以获取实际数据。
此处的实时版本:https://codepen.io/dpwrussell/pen/qadrko
class Application extends React.Component {
constructor(props) {
super(props);
// Start with 2 records
this.state = {
records: [
{
name: 'foo',
description: 'Some foo'
},
{
name: 'bar',
description: 'Some bar'
}
]
};
// Bind handlers
this.loadMoreRecords = this.loadMoreRecords.bind(this);
}
// Method to call which gets more records on demand
// Here I just use setTimeout and some static data, but in your case
// this would be AJAX to get the data from your server where the callback
// would do the setState. I use a 2 second delay to exaggerate a delay getting
// the data from the server.
loadMoreRecords() {
setTimeout(() => {
this.setState({
records: this.state.records.concat([
{
name: 'hello',
description: 'Some newly loaded hello'
},
{
name: 'world',
description: 'Some newly loaded world'
}
])
})
}, 2000);
}
// Method to render whatever records are currently in the state
renderRecords() {
const { records } = this.state;
return records.map(record => {
return (
<li>{ `${record.name} - ${record.description}` }</li>
);
})
}
// React's render method
render() {
return (
<div>
<h1>List of Records Page</h1>
<ul>
{ this.renderRecords() }
</ul>
<input type='button' onClick={this.loadMoreRecords} value='Load more Records' />
</div>
);
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<Application />, document.getElementById('app'));
答案 1 :(得分:-1)
使用css-modules-require-hook。它与babel-register类似,但是对于.css文件。基本上,它会将您的require('Record.css')转换为您的hook配置上的javascript Object。所以你的钩子配置应该与webpack css-loader config相同。
将其放入服务器的输入文件中。
const hook = require('css-modules-require-hook');
hook({/* config */});