React JSX

一、JSX的语法：可以在js中使用html标签

二、React中，自定义的组件首字母，否则render方法出错

三、js的求值表达式{},在{}中不可以使用if等语句

1:使用三元表达式，

2:将判断的逻辑写在一个函数中

       getName：function(){

            if(this.props.name)

                return this.props.name

            else 

               return ""

       }

扫描二维码关注公众号，回复： 717607 查看本文章

然后在组件{}中，使用getName

3:使用或运算符 this.props.name || ""

4:还可以使用函数表达式：

render: function(){

(function(obj){if(obj.prop.name) return obj.props.name else return "world"})(this)

}

obj和this是一个内容

函数本身会创建一个闭包作用域，如果在内层函数想拿到外层函数的对象，就需要使用this关键字作为外层函数的一个参数传入，这个内部函数拿个的this就是外层函数的所属对象

 

四、在jsx中使用css

1:  第一个style对象

     var style = {

              color ："red",

              border : "1px #000 solid"

      }

2:  组件中使用style

     使用例如<div style={style}></div>

 

五、React 中有三个非 DOM 属性：key、ref 和 dangerouslySetInnerHTML

dangerouslySetInnerHTML ： 动态增加

var rawHtml = {

　　＿html : "<h1> inner html </h1>"

}

<div dangerouslySetInnerHTML  = {rawHtml }></div>

 

ref ： 父组件引用子组件

render : function(){

           return <p ref="childp">hello world</p>

}

 

this.ref.childp 得到虚拟dom

this.ref.childp.getDOMNode()  得到真实dom

 

key：列表类型的组件，必须使用key

<ul>

<li key="1">1</li>

<li key="2">2</li>

<li key="3">3</li>

<ul>