• React的CSS


    1.代码

    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <script src="./react-0.13.2/build/react.js"></script>
        <script src="./react-0.13.2/build/JSXTransformer.js"></script>
    	<script type="text/jsx">
    		var style = {
    			color : "red",
    			border: "1px #000 solid",
    		};
    		var HelloWorld = React.createClass({
    			render: function(){
    				return <p>你好React</p>;
    			}
    		});
    		React.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body);
    	</script>
    </body>
    
    </html>
    

    2.运行结果

    3.运行后源码

    <html lang="zh-cn"><head>
        <meta charset="UTF-8">
        <title>Document</title>
    <script>
    		var style = {
    			color : "red",
    			border: "1px #000 solid",
    		};
    		var HelloWorld = React.createClass({displayName: "HelloWorld",
    			render: function(){
    				return React.createElement("p", null, "你好React");
    			}
    		});
    		React.render(React.createElement("div", {style: style}, React.createElement(HelloWorld, null)), document.body);
    	
    //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbIklubGluZSBKU1ggc2NyaXB0Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsSUFBSSxLQUFLLEdBQUc7R0FDWCxLQUFLLEdBQUcsS0FBSztHQUNiLE1BQU0sRUFBRSxnQkFBZ0I7R0FDeEIsQ0FBQztFQUNGLElBQUksZ0NBQWdDLDBCQUFBO0dBQ25DLE1BQU0sRUFBRSxVQUFVO0lBQ2pCLE9BQU8sb0JBQUEsR0FBRSxFQUFBLElBQUMsRUFBQSxTQUFXLENBQUEsQ0FBQztJQUN0QjtHQUNELENBQUMsQ0FBQztFQUNILEtBQUssQ0FBQyxNQUFNLENBQUMsb0JBQUEsS0FBSSxFQUFBLENBQUEsQ0FBQyxLQUFBLEVBQUssQ0FBRSxLQUFPLENBQUEsRUFBQSxvQkFBQyxVQUFVLEVBQUEsSUFBYyxDQUFNLENBQUEsRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcblx0XHR2YXIgc3R5bGUgPSB7XG5cdFx0XHRjb2xvciA6IFwicmVkXCIsXG5cdFx0XHRib3JkZXI6IFwiMXB4ICMwMDAgc29saWRcIixcblx0XHR9O1xuXHRcdHZhciBIZWxsb1dvcmxkID0gUmVhY3QuY3JlYXRlQ2xhc3Moe1xuXHRcdFx0cmVuZGVyOiBmdW5jdGlvbigpe1xuXHRcdFx0XHRyZXR1cm4gPHA+5L2g5aW9UmVhY3Q8L3A+O1xuXHRcdFx0fVxuXHRcdH0pO1xuXHRcdFJlYWN0LnJlbmRlcig8ZGl2IHN0eWxlPXtzdHlsZX0+PEhlbGxvV29ybGQ+PC9IZWxsb1dvcmxkPjwvZGl2PiwgZG9jdW1lbnQuYm9keSk7XG5cdCJdfQ==</script></head>
    
    <body><div style="color:red;border:1px #000 solid;" data-reactid=".0"><p data-reactid=".0.0">你好React</p></div></body></html>
    

      

  • 相关阅读:
    聚簇索引与非聚簇索引(二级索引)的区别
    swoole介绍
    什么是mysql执行计划
    php-fpm浅析
    字段设计规范
    mysql排序规则utf8_genera_ci和utf8_bin的区别
    chrome 麦克风被禁用
    获取地址栏参数
    vue 打包去掉console debugger
    Vue less全局变量预处理加载
  • 原文地址:https://www.cnblogs.com/shamgod/p/5049898.html
Copyright © 2020-2023  润新知