1.React.renderToString 函数, 参数是组件，返回一个字符串
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
<script src="../build_0.13/react-with-addons.min.js"></script>
<style type="text/css">
.example-enter{color:red;}
.example-active{color:green;}
</style>
</head>
<body>
<div id="example" > </div>
<script type="text/jsx">
var MyComponent = React.createClass({
render:function(){
return (
<div>Hello World!</div>
);
}
});
var world = React.renderToString(<MyComponent />);
alert(world);
console.log(world);
</script>
</body>
</html>
2.另一个服务端渲染函数： React.renderToStaticMarkup ,他没有data属性
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
<script src="../build_0.13/react-with-addons.min.js"></script>
<style type="text/css">
.example-enter{color:red;}
.example-active{color:green;}
</style>
</head>
<body>
<div id="example" > </div>
<script type="text/jsx">
var MyComponent = React.createClass({
render:function(){
return (
<div>Hello World!</div>
);
}
});
//var world = React.renderToString(<MyComponent />);
var world = React.renderToStaticMarkup(<MyComponent />);
alert(world);
console.log(world);
</script>
</body>
</html>
两者在什么时候使用呢？
当且仅当你不打算在客户端渲染这个React Component时，才应该选择使用React.renderToStaticMarkup函数，如：
- 生成html电子邮件
- 通过HTML到PDF的转化生成PDF
- 组件测试
大多情况下 ，我们都使用React.renderToString()来进行服务端的渲染。
时间： 2024-08-14 09:38:54