react中的jsx语法及注释

责编:menVScode 2017-06-17 14:08 阅读(1790)

一、jsx是什么

            jsx不是一种新的语言,也不一定非要使用jsx。jsx是一种基于ECMAScript新特性的语法,带属性(DOM节点)树结构(DOM结构)的语法。

            jsx书写的本质还是html标签,只不过在javascript中使用这些标签的时候,不使用引号("")包裹起来,需要javascript规则来解析他们。jsx语法浏览器是无法直接解析,我们可以用webpack构建工具等方式来进行编译,这里暂时用babel.js来编译jsx。

二、jsx的特点

        1、类XML语法,易于接受

        2、增强JS语义,在js中编辑HTML

        3、结构清晰

        4、抽象程度高(核心):避免手动DOM操作,跨平台

         5、代码模块化

三、JSX语法

        clipboard

    注意事项:

        1、首字母必须大写

        2、驼峰命名

        3、使用className与htmlFor代替class和for

        4、组件与组件之间是可以嵌套的

        5、在JSX语法中只能使用求值表达式,不能使用语句

        6、只有一个顶层标签

        来一个完整例子:

var Demo = React.createClass({
    website:function (){
        return 'menvscode.com'
    },
    doClick:function(){
        alert(1)
    },
    render: function(){
        // this指向整个(当前的组件)组件
        return <div className="demo" onClick={this.doClick}>这是一个{this.website()}</div>
    }
});
ReactDOM.render(
    <Demo/>,
    document.getElementById('app')
)

四、jsx的注释

        jsx注释通常注释是以这样方式展现:{/**/};也可以在标签内部进行注释,但方式也有不同了。

var HelloWorld = React.createClass({
    render:function(){
        // 现在这里是属于js的部分,不属于JSX语法的部分,jsx是return后面一部分
        return (
            <div className="box" // 标签里的注释方式
                /*可以不加{}*/
            >
                {/*这是一个标题*/}
                <h1 className="title">Hello World</h1>
                {/*这是说明*/}
                <p>你好世界!</p>
                <div className="box2">你好</div>
            </div>
        )
    }
});
ReactDOM.render(
    <HelloWorld/>,document.getElementById('app')
)

        上面三种不同地方不同方式的注释手法,看到了么,就这么简单。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码