reactjs入门到实战（二）---- jxs详解

最新推荐文章于 2023-04-04 09:01:43 发布

转载最新推荐文章于 2023-04-04 09:01:43 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/chenjinxinlove/p/5558978.html

标签

#javascript #人工智能 #ViewUI

收录于

本文详细介绍了JSX语法的使用规范与限制，如大写关键字与特定属性的使用，以及通过Babel将JSX转换为React.createElement调用的过程。同时提供了具体的代码示例，展示了如何将JSX语法转换为等效的React元素创建函数。

》》》如何转换 JSX transformer Babel 官网：http://babeljs.io/ 里面有一个可以看转换的测试器，es6什么的也可以应用：

注意：jsx要用大写 class 、for 、style 、onChange 是不能用的关键词。style使用颜色的时候用 style = {{color:'red',fontSize:20}}

》》》例子二：

var Hello = React.createClass({
                render:function(){
                    return(
                        <span> Hello {this.props.name }!</span>
                    );
                }
            });
            var props = {};
            props.name = "chen";
            props.age = 17;
            var MyHello = <Hello {...props} />;
            ReactDOM.render(MyHello,document.getElementById('example'))

"use strict";

var Hello = React.createClass({
    displayName: "Hello",

    render: function render() {
        return React.createElement(
            "span",
            null,
            " Hello ",
            this.props.name,
            "!"
        );
    }
});
var props = {};
props.name = "chen";
props.age = 17;
var MyHello = React.createElement(Hello, props);
ReactDOM.render(MyHello, document.getElementById('example'));