1.React.renderToString 函数, 参数是组件，返回一个字符串<!DO...
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()来进行服务端的渲染。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：LeetCode102 二叉树层序遍历 下一篇：D. 残缺的车牌一
