转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://www.jb51.cc/article/p-oyaohaue-bpo.html

React开发-JSX使用与详解

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。JSX可以看作是JavaScript的扩展,看起来像XML语法。

render(){
    let datas = [1,2,3,4];
    let arrays = [
        <div key={1}>01</div>,<div key={2}>02</div>,<div key={3}>03</div>
    ];
    return <div>
        {
            datas.map(function(data){
                return <div key={data} >{datas+":"+data}</div>;
            })
        }
        {
            arrays
        }
        {
            [1].map(function(data){
                if(data==1){
                    return true+":"+data;
                }else{
                    return false+":"+data;
                }
            })
        }
    </div>
}

//创建Person类
let Person = React.createClass({
    render(){
        return <div>{this.props.name}</div>
    }
});
//JSX调用
<Person name={1}/>
//直接JS调用
React.createElement(Person,{name:1});
//在Person外面再套一层div的调用
React.createElement('div',null,React.createElement(Person,{name:1}));

//在标签里面注释可以直接使用/*注释*/,示例如下:
<Person /*age height*/ name={1111}/>
<a /*href=""*/ href="#" />
//在标签外面注释只能使用大括号{},示例如下:
{
    /*这里可以写多行注释或者单行注释*/
    //可以使用双斜杠注释写单行注释
}

<Person name={data==1?'真:1':'假:非1'}/>

let data = 0;
<Person  name={
    [1].map(function(data){
        if(data==1){
            return "真:1";
        }else{
            return "假:非1";
        }
    })
}/>
或者
let data = 0;
let result = '';
componentWillMount(){
    if(data==1){
        result = "真:1";
    }else{
        result = "假:非1";
    }
}//这里也可以在别的函数里面判断
<Person name={result}/>

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name || "World"}</div>;
  }
});

//1
{
    (
        () => {
            //1.箭头函数默认绑定了this的,所以这里的this可以省略
            //2.()在箭头函数使用时只能放在外面,像function一样放到里面就会报错
            //3.大括号里面的第一个小括号表示强制执行的意思
            return '箭头函数执行了1';
        }
    )()
}
或者
//2
{
    (
        function(){
            //1.(this)放到里面
            //2.如果函数了内部没有使用this,这里的this也可以像箭头函数一样省略
            //3.大括号里面的第一个小括号表示强制执行的意思
            return '普通函数执行了1';
        }(this)
    )
}
或者
//3
{
    (
        function(){
            //1.(this)放到外面
            //2.如果函数了内部没有使用this,这里的this也可以像箭头函数一样省略
            //3.大括号里面的第一个小括号表示强制执行的意思
            return '普通函数执行了2';
        })(this)
}

<label className="xxx" htmlFor="input">content</label>

var myDivElement = <div className="foo" />;

var MyComponent = React.createClass({/*...*/});

var component = <Component foo={x} bar={y} />;

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

//定义一个组件
let Person = React.createClass({
    getDefaultProps(){
        return {name:'张三',age:12};
    },render(){
        return <div>Name:{this.props.name}<br/>Age:{this.props.age}</div>
    }
});
//延伸属性的使用
{
    (
        ()=>{
           let props = {};
            props.name = '李四';
            props.age = 21;
            return <Person {...props} age={22} />
        }
    )()
}

//假设这个是接口返回的富文本,是一个字符串
let richText = '<span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>';
//使用变量
{richText}

<div dangerouslySetInnerHTML={{__html:richText}} ></div>

<div ref="fwb" ></div>
this.refs.fwb.innerHTML = '<span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>';

React.render(
    <div dd='xxx'>content</div>,document.body
);

React.render(
    <div data-dd='xxx' aria-dd='xxx'>content</div>,document.body
);

React开发-JSX使用与详解

博客地址：http://www.jb51.cc/article/p-oyaohaue-bpo.html