概览:react的使用 , 服务器端渲染
前面用户列表展示出来后,需要做的就是增删改查各种操作,用jquery? , 真心累了 .换react试下.
现在想用js加载用户列表动态渲染页面,渲染方式有两种: 1,浏览器端渲染 2,服务器端渲染,然后传递html回去
尝试服务器端渲染
关键在于用 React.renderToString(Component({})) 方法将组件转为html插入到页面去.
接着遇到了一个坑 , 报错 React.renderToString is not a function 郁闷一天 , 发现用 npm install react --save 下载的react是15.xx.xx版本 , 改成 "react": "~0.12.0", 就好了
接着有一个问题,isomorphic-server项目用的是jade模版引擎 , 折腾一番发现只要在视图名加上ejs后缀就可以了 , 好智能.
定义组件
/components/MyTable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 'use strict'
var React = require('react');
var MyTable = React.createClass({
render() {
var tableStyle = {border: 'solid 1px pink'};
return (
<table style={tableStyle}>
{this.props.users.map((user, index)=>
<tr key={index}>
<td>{user.name}</td>
</tr>)}
</table>
)
}
}
);
module.exports = MyTable;
|
调用和渲染
/controllers/users.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var React = require('react');
var MyTable = React.createFactory(require("../components/MyTable"));
exports.index2 = function (req, res) {
User.find({}, function (err, users) {
if (err) {
res.send(err);
} else {
var html = React.renderToString(MyTable({users: users}));
console.log('html:', +html);
res.render('user2.ejs', {title: 'user', html: html});
}
});
};
|
其中 React.renderToString()方法将组件渲染为html插入到页面中
路由和页面
/routes/users.js
1
| router.get('/2', users.index2);
|
/views/user2.ejs
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
welcome to <%= title %>
<%- html %>
</body>
</html>
|
预览
