https://github.com/peakchen90/babel-plugin-react-directives
A babel plugin that provides some directives for react(JSX), similar to directives of vue.
https://github.com/peakchen90/babel-plugin-react-directives
babel-plugin directive jsx-directive react react-directive v-for v-if v-model v-show x-for x-if x-model x-show
Last synced: about 2 months ago
JSON representation
A babel plugin that provides some directives for react(JSX), similar to directives of vue.
- Host: GitHub
- URL: https://github.com/peakchen90/babel-plugin-react-directives
- Owner: peakchen90
- License: mit
- Created: 2019-09-29T14:51:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-23T06:07:48.000Z (4 months ago)
- Last Synced: 2025-04-13T00:48:37.758Z (about 2 months ago)
- Topics: babel-plugin, directive, jsx-directive, react, react-directive, v-for, v-if, v-model, v-show, x-for, x-if, x-model, x-show
- Language: JavaScript
- Homepage: https://peakchen90.github.io/babel-plugin-react-directives
- Size: 2 MB
- Stars: 97
- Watchers: 3
- Forks: 14
- Open Issues: 7
-
Metadata Files:
- Readme: README.ZH-CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-directives
一个给react (任何 JSX ) 提供一些类似 vue 指令的 Babel 转换插件。现在你可以在 [playground](https://peakchen90.github.io/babel-plugin-react-directives/) 上在线尝试。
[](https://travis-ci.com/github/peakchen90/babel-plugin-react-directives)
[](https://codecov.io/gh/peakchen90/babel-plugin-react-directives)
[](https://www.npmjs.com/package/babel-plugin-react-directives)
[](https://github.com/peakchen90/babel-plugin-react-directives/blob/master/LICENSE)
> [**English document**](./README.md)
## 目录
- [开始使用](#toc-usage)
- [安装](#toc-installation)
- [添加配置 .babelrc](#toc-configuring)
- [插件options](#toc-plugin-options)
- [指令](#toc-directives)
- [x-if](#toc-directives-x-if)
- [x-else-if 和 x-else](#toc-directives-x-else-if-and-x-else)
- [x-show](#toc-directives-x-show)
- [x-for](#toc-directives-x-for)
- [x-class](#toc-directives-x-class)
- [相关资源](#toc-related-packages)
- [已知问题](#toc-known-issues)
- [更新日志](#toc-changeloog)
- [许可证](#toc-license)
## 开始使用
需要 **node v10.0.0** 或者更高版本，**babel v7.0.0** 或者更高版本
### 安装
使用 npm:
```bash
npm install --save-dev babel-plugin-react-directives
npm install --save react-directives-runtime
```
使用 yarn:
```bash
yarn add --dev babel-plugin-react-directives
yarn add react-directives-runtime
```
### 添加配置 `.babelrc`
```json
{
"plugins": [
"react-directives"
]
}
```
### 插件options
```json
{
"plugins": [
[
"react-directives",
{
"prefix": "x"
}
]
]
}
```
- `prefix`: 指令的 props 前缀，默认值: "x"，用法示例: `x-if`
## 指令
### x-if
如果 `x-if` 的值为**真值**，则将渲染此元素，否则不渲染。
**例子:**
```jsx harmony
const foo =
text
```
**转换成:**
```jsx harmony
const foo = true ?
text : null
```
### x-else-if 和 x-else
在 `x-else-if` 的同一层级元素必须有相对应的 `x-if`，如果 `x-if` 的值是**假值**，并且 `x-else-if` 的值是**真值**，则它将被渲染。
在 `x-else` 的同一层级元素必须有相对应的 `x-if` 或 `x-else-if`，当 `x-if` 或者 `x-else-if` 都是**假值**时，它将被渲染。
**例子:**
```jsx harmony
const foo = (
A
B
C
D
)
```
**转换成:**
```jsx harmony
const foo = (
{data === 'a'
? A
: data === 'b'
? B
: data === 'c'
? C
: D
}
)
```
### x-show
`x-show` 通过 `style` prop 的 `display` 属性来控制元素的显示或隐藏，如果 `x-show` 的值是**假值**，则设置 `style.display = "none"`，否则不设置。
**例子:**
```jsx harmony
const foo =
text
```
**转换成:**
```jsx harmony
const foo = (
text
)
```
当然，它也会通过调用 [mergeProps 方法](./runtime/merge-props.js) 合并其他 `style` props，例如：
```jsx harmony
const foo = (
text
)
```
将被转换成:
```jsx harmony
const foo = (
text
)
```
### x-for
使用 `x-for` 遍历数组生成元素。
绑定的值应该像这样: `(item, index) in list`
- `list`: 遍历的目标数组
- `item`: 当前的值
- `index`: 当前的索引 (可选)
**提示**: 如果你在项目中使用了 [**ESLint**](https://eslint.org)，也许会提示你: `item` 和 `index` 是未定义的变量，请安装 [**eslint-plugin-react-directives**](https://github.com/peakchen90/eslint-plugin-react-directives) 来解决这个问题
**例子:**
```jsx harmony
const foo = (
- {item.name}
)
```
**转换成:**
```jsx harmony
const foo = (
- {item.name}
{list.map(item => (
))}
)
```
另外请注意，如果与 `x-if` 一起使用，则 `x-for` 拥有更高的优先级，例如：
```jsx harmony
const foo = (
- {item.name}
)
```
将被转换成:
```jsx harmony
const foo = (
- {item.name}
{list.map(item => (
item.name === 'alice'
?
: null
))}
)
```
### x-class
`x-class` 通过 [classnames](https://github.com/JedWatson/classnames) 有条件的生成 className, 这对于动态生成 className 非常有用。
用法与 [classnames](https://github.com/JedWatson/classnames) 相同，绑定值将作为参数传给 [`classNames`](https://github.com/JedWatson/classnames#usage) 方法。
**例子:**
```jsx harmony
const foo =
```
**转换成:**
```jsx harmony
const foo =
// className="abc"
```
**提示**: `classNames` 方法引用于 [runtime/classnames.js](./runtime/classnames.js).
当然，它也将合并其他的 `className` props, 例如:
```jsx harmony
const foo =
```
将被转换成:
```jsx harmony
const foo =
// className="xyz abc"
```
`x-class` 也可以与 [css-modules](https://github.com/css-modules/css-modules) 一起使用，例如：
```jsx harmony
import styles from './style.css';
const foo = (
)
```
## 相关资源
- [eslint-plugin-react-directives](https://github.com/peakchen90/eslint-plugin-react-directives)
## 已知问题
- 在 Typescript 中使用 `x-for` 时，绑定的值 `item` 会报一个错误。临时的解决方案是，在使用前先声明变量 `item`，
例如: `declare let item: any`. **不推荐在 Typescript 中使用 `x-for`**.
## 更新日志
查看更多信息: [CHANGELOG](./CHANGELOG.md)
## 许可证
[MIT](./LICENSE)