React开发-JSX使用与详解

转载请注明预见才能遇见的博客：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>
}

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

1.属性表达式
如果需要在HTML中混入JavaScript变量值，需要利用{}来代替"",如果使用""就会变成字符串。

//创建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}));

这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。
说明:用React开发不一定就要使用JSX语法,可以直接使用原生的JS开发,但是官方推荐我们使用JSX语法,因外JSX在定义HTML这种树形结构时十分的简单方便。JSX有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更容易阅读。使用JSX之后需要使用babel解析器把JSX转化为JS语法。

2.注释
在React使用JSX里注释不能用HTML的注释()方式，可以间接的使用JS注释和CSS注释。
HTML注释:
CSS注释:/*CSS注释*/
JS注释:单行注释//JS单行注释,多行注释/*JS多行注释*/,多行注释和CSS的注释一样的

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

说明:大括号里面其实写的是JS代码,所以可以使用JS的注释。由于CSS的注释和JS的多行注释一样,因此也可以使用。

3.If-Else
在JSX中是不可以直接在{}中加入if-else的，可以使用下面这种三元表达式：

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

在JSX中间接的使用if-else的技巧

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}/>

说明:如果三元表达式可以满足你的需求就使用三元表达式,如果三元表达式不能满足你的需求你就可以间接的使用if-else
除了上面的使用方式之外还可以使用比较运算符“ || ”来书写，如果左边的值为真，则直接返回左边的值，否则返回右边的值，与if的效果相同。

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

4.函数表达式()有强制运算的作用,这里算是(4)的一个扩展,里面可以使用if-else、for等语句

//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)
}

5.标签的属性className和htmlFor
在使用React中标签的属性class和for，都需要写成className和htmlFor,无论你是否使用JSX,因为两个属性是JavaScript的保留字和关键字。

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

6.首字母小写还是大写的问题
渲染HTML标签，声明变量采用首字母小写

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

渲染React组件，声明变量采用首字母大写

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

说明:通过变量的声明，来区分HTML标签和React组件

7.JSX延伸属性
(1)不要改变props
如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：

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

而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：

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

这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。
(2)延伸属性(为了解决(1)中的问题)

//定义一个组件
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} />
        }
    )()
}

说明:开发是可以通过{...props}的方式引入延伸属性,props是一个对象,然后往对象中添加属性。如果需要覆盖属性,可以像这里age一样重复添加一次。

8.HTML转义

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

这是richText肯定会被当做是字符串,界面上将会显示"<span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>"
如果这里不是接口返回的,我们就可以直接把单引号去掉,不作为字符串
let richText = <span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>;
这样就会显示正常,显示"加入这个是后台返回的富文本,a里面有很多标签里面有很多标签"
如果是接口返回的富文本,因为JSON传过来这里就是字符串,所以我们不像这里可以把单引号去掉,可以使用dangerouslySetInnerHTML属性,也可以显示正常

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

说明:React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以使用dangerouslySetInnerHTML属性
除了使用dangerouslySetInnerHTML属性以外还可以直接使用innerHTML,示例如下:

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

通过React的ref获取到元素DOM然后设置innerHTML属性,当然也可以通过其他方式获取到元素的节点,ref只是React的方式。

9.自定义HTML属性
如果在编写React过程中使用了自定义属性，React是不会渲染的,比如:

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

要想在编写React过程中使用自定义属性,需要写成下面的形式:

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

10.React的style={{}}
这里的最外层{}意思是通知JSX这里是JS语法,里面的{}的意思是样式的属性值只能是对象,而且也需要使用驼峰命名法,不能使用background-color,只能使用backgroundColor

11.JSX闭合标签(HTML某些标签可以不闭合,比如<img> <br> <input> <li> <p>)
在 JSX 中， <MyComponent /> 是合法的，而 <MyComponent> 就不合法。所有的标签都必须闭合，可以是自闭和的形式，也可以是常规的闭合,<div />和<div></div>都是合法的。

12.JSX 根节点的最大数量
目前，一个 component 的 render，只能返回一个节点。如果你需要返回一堆 div ，那你必须将你的组件用一个div 或 span 或任何其他的组件包裹。切记，JSX 会被编译成常规的 JS；因此返回两个函数也就没什么意义了，同样地，千万不要在三元操作符中放入超过一个子节点。

参考资料:点击打开链接点击打开链接点击打开链接点击打开链接

React开发-JSX使用与详解

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

React开发-JSX使用与详解

猜你在找的React相关文章