React的JSX语法简单支持if判断

1.首先说说JSX

  • JSX是官方推荐的一种写法,实质上这只是一个语法糖
  • 在React中开发中,JSX并不是唯一选择
  • 最终JSX都会编译解析,通过React.createElement实现https://facebook.github.io/react/docs/react-api.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    //使用JSX
    class App extend React.Component {
    render() {
    return (
    <div>
    <div>拯救不开心</div>
    </div>
    );
    }
    }
    ReactDom.render(<App />, document.getElementById('app'));
    //不使用JSX
    class App extend React.Component {
    render() {
    return (
    React.createElement('div', null,
    React.createElement('div', null, '拯救不开心')
    )
    );
    }
    }
    ReactDom.render(<App />, document.getElementById('app'));

2.JSX中不支持逻辑判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 毫无疑问这样写会有问题
class App extend React.Component {
render() {
return (
<div>
{
if (bool) {
<div>拯救不开心<div/>
}
}
</div>
);
}
}

3.利用闭包特性,简单支持if判断

  • 直接贴代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // If.js--ES5
    exports.If = function (bool) {
    return function (jsx) {
    return bool ? jsx : null;
    };
    };
    //If.js--ES6
    export default option => bool => bool ? jsx : null;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//使用
class App extend React.Component {
render() {
return (
<div>
{
If (list.length === 0) (
<div>暂无数据</div>
)
}
</div>
);
}
}
  • 注意,代码块是用()包裹,而不是{},因为返回的是一个函数,需要再次调用
  • bool ? jsx : null这里通过单元表达式最终判断返回的内容

4.有人可能会问,上述判断直接写三元表达式JSX不是也支持么

  • 是的,说的没有问题
  • 主要是看取舍了,三元表达式在html结构比较大的情况下代码可读性并不好,看自己的取舍和编程习惯吧