React(0.13) 服务端渲染的两个函数-优快云博客

本文介绍了React中的两个服务端渲染函数：React.renderToString和React.renderToStaticMarkup。详细解释了两者的区别及应用场景，如用于生成HTML邮件、组件测试等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" >&nbsp;</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" >&nbsp;</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>