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、最後說一點

在我看來，這個插件會大大加大編譯打包的時間以及代碼量，若是沒有特殊需求，能夠不去使用這個🤗🤗🤗🤗。