JSX简介

React程序结构介绍
React程序使用了JSX写在js中
在sublime中输入HTML：5按tab键会自动生成HTML5文档结构
sublime运行HTML的快捷键是Ctrl+Alt+V

JSX语法及特点介绍
JSX = JavaScriptXml
在JavaScript中编写像XML的语言仅仅长得像XML，在本质上是不一样的
JSX是：

基于ECMScript的一种新特性
一种定义带属性树结构的语法
JSX的特点：
类XML语法易于接受
增强JS语义
结构清晰
抽象程度高跨平台抽象是JSX的核心
代码模块化

如何使用JSX
JSX语法
1、元素名
2、子节点，每个组件都会有属性，属性内部会有很多属性名
3、节点属性在使用标签的时候指定属性和属性值
React对首字母大小写敏感 首字母大写：React就知道这是开发者自定义的元素
首字母小写就是DOM自带的组件
嵌套可以多层嵌套
求值表达式 本身是一个表达式，会返回一个值，在组件大括号里不能写ifelse等语句但是可以写求值表达式
*驼峰命名 *
htmlFor和className 两个特殊属性，如果我们要在jsx中使用HTML属性或是class属性我们要使用的是htmlFor和className，在JSX中直接使用class会报错在这里插入图片描述 JSX示例
1、注释、CSS样式以及嵌套
1.1在子节点中添加注释需要用大括号包裹，在大括号内部添加注释

  var HelloWorld = React.createClass({
        render:function () {
            return <p
            /*
            * 属性注释
            *
            * */
            >Hello,World{
                /*
                * 子节点注释
                * */
            }</p>
        }
    });

1.2添加CSS样式
首先创建一个对象，对象中的属性就是CSS中的属性需要注意的是属性名同样使用驼峰命名法

   var style ={
        color:"red",
        border:"1px solid #000",
    }

接下来把对象应用到组件中，如果直接应用到自定义的组件中是不起作用的
只能把样式在render中添加进去，或者在自定义标签外面再套一层标签

React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

2、条件判断的四种写法
{if(this.props.name) this.props.name else “world”}
2.1三元表达式

{this.props.name?this.props.name : "world"}

2.2使用一个变量

var HelloWorld = React.createClass({
        getName:function () {
            if(this.props.name)
                return this.props.name
            else 
                return "World"
        }
        render:function () {
            var name = getName();
            return <p>Hello,{name}</p>
        }
    });

2.3 直接调用函数

  var HelloWorld = React.createClass({
        getName:function () {
            if (this.props.name)
                return this.props.name
            else
                return "World"
        },
        render:function () {
            return <p>Hello,{this.getName()}</p>
        }
    });

2.4使用比较运算符

render:function () {
            return <p>Hello,{this.props.name || "world"}</p>
        }

如果左边的值是真那么返回左边的值，如果是假就返回右边的值

3万能的函数表达式

可以将语句变成表达式

 render:function () {
            return <p>Hello,{
                (function (obj){
                    if(obj.props.name)
                        return obj.props.name
                    else
                        return "World"
                })(this)
            }</p>
        }

猜你喜欢