jsx-control-statements - jsx的一大利器

1、为何如此难受🤔

在咱们去写 JSX 的时候，有时候一直在感叹为何在 JSX 里面写不了条件语句，举个栗子🌰（为何都举我）：

render () {
    return (
        <div> { if(true) { <span>渲染我</span> } else { <span>不！要渲染我</span> } } </div>
    );
}
复制代码

可是！这样写是不合法的，JSX 识别不了。在 JSX 中咱们只能去写表达式，这种状况下咱们就只能三元表达式去替代咯。

2、用什么去加强jsx呢？

JSX-Control-Statements 是一个Babel插件，它扩展了 JSX 以添加基本控制语句：条件和循环。
它是经过将相似组件的控制语句转换为它们的 JavaScript 对应语句来实现的：

<If condition={condition()}>Hello World!</If>变为condition() ? 'Hello World!' : null。
复制代码

惟一依赖 JSX-Control-Statements 依赖的是 Babel 。它与React和React Native兼容。

3、安装

PS：由于它是 Babel 的一个插件，因此咱们在使用它的时候要先检查是否安装了babel

咱们经过 npm 去安装 jsx-control-statements

npm install --save-dev babel-plugin-jsx-control-statements
复制代码

而后你只须要将 JSX-Control-Statements 指定为 Babel 插件，你一般会在你的插件中执行 .babelrc 。

{
  ...
  "plugins": ["jsx-control-statements"]
}
复制代码

若是你使用的 transform-react-inline-elements 插件，把它放在 jsx-control-statements 后边：

{
  ...
  "plugins": ["jsx-control-statements", "transform-react-inline-elements"]
}
复制代码

4、语法

IF标签

用于表示最简单的条件逻辑。

// 若是condition的条件为真，则渲染if语句的主体
// 在这里，这条语句会被转换成三元表达式，
// { true ? <span>我显示咯</span> : null }

<If condition={ true }>
  <span>我显示咯</span>
</If>
复制代码

PS：不要使用 <Else /> ,由于它已经被废弃了。

Choose标签

这是更高级的一种写法。

// 这个会被转换成更复杂的三元表达式

<Choose>
  <When condition={ isShow1 }>
    <span>显示我？</span>
  </When>
  <When condition={ isShow2 }>
    <span>仍是显示我？</span>
  </When>
  <Otherwise>
    <span>都不知足那就显示我吧，我帅！</span>
  </Otherwise>
</Choose>
 
<Choose>
  <When condition={true}>
    <span>显示我！</span>
  </When>
</Choose>
复制代码

<Choose>

做为一个简单的容器，只容许将 <when> 和 <otherwise> 做为子级，每一个 <choose> 语句至少须要一个 <when> 块，<otherwise> 块是可选的。

<When>

相似于 <IF>

<Otherwise>

都不知足则渲染这个。

For标签

// 注意，这里面咱们不要忘记key属性！！！
// 注意，<for>不能位于react中render函数的根节点！！！
<For each="item" of={ this.props.items }>
    <span key={ item.id }>{ item.title }</span>
</For>

<For each="item" index="idx" of={ [1,2,3] }>
    <span key={ idx }>{ item }</span>
    <span key={ idx + '_2' }>Static Text</span>
</For>
复制代码

With标签

用于为局部变量赋值。

// 能够用一条<With>语句分配多个变量。定义的变量仅在<With>块中可用。
// 咱们能够在<With>上定义多个属性 好比：foo={ 47 }  foo2={ 48 } foo3={ 49 }。
// 咱们也能够去嵌套使用。
<With foo={ 47 }>
  <span>{ foo }</span>
</With>
复制代码

这块可能稍微的有点费解，你们看下转换后的代码就会清楚了：

// 定义了局部变量，至关于一个单独的做用域
{
  (function(foo) {
    return <span>{ foo }</span>
  }).call(this, 47)
}
复制代码

5、主要版本

• 4.xx是一个纯Babel插件，支持Babel >= 7。
• 3.xx是一个支持Babel >= 6的纯Babel插件。
• 2.xx是一个支持Babel >= 6的Babel插件，以及JSTransform使用者。
• 1.xx是一个Babel插件，支持Babel <= 5，以及JSTransform使用者。

这曾经支持JSTransform和Babel，但因为再也不维护JSTransform，因此再也不支持它。你能够在 github.com/alexgillera… 上找到JSTransform版本的代码。

6、最后说一点

在我看来，这个插件会大大加大编译打包的时间以及代码量，若是没有特殊需求，能够不去使用这个🤗🤗🤗🤗。