react jsx attribute similar Vue/v-if attribute
帮助实现React框架中,类似Vue的v-if属性
base effect: 原理/作用
// your code, before transform
// 原代码
const ELEMENT = ({ visible }) => (
<div>
<div r-if={visible}>VISIBLE</div>
</div>
)
// result code
// 转换后代码
const ELEMENT = ({ visible }) => (
<div>
{
visible ? <div>VISIBLE</div> : null
}
</div>
)
白切 wechat: feng-baiqie
初始化:
npm install --save-dev rif-loader
use with webpack/loader:
做为独立的loader来使用
// webpack.config.js
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
},
'rif-loader'
]
},
]
}
use with babel-loader/plugins:
做为babel-loader中的一个plugin来使用
// webpack.config.js
const { babelPlugin: rifPlugin } = require('rif-loader')
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: [rifPlugin]
}
},
]
},
]
}
use in react:
// 普通节点
import { useState } from 'raect'
const Element = () => {
const [visible, setVisible] = useState(true)
return (
<div>
<div r-if={visible}>ELEMENT</div>
<button
onClick={() => setVisible(!visible)}
>
visible/hidden
</button>
</div>
)
}
// 组件
import { useState, useEffect } from 'raect'
const Component = () => {
useEffect(() => {
console.log('effect')
}, [])
return (<div>COMPNENT</div>)
}
const Element = () => {
const [visible, setVisible] = useState(false)
return (
<div>
<Component r-if={visible} />
<button
onClick={() => setVisible(!visible)}
>
visible/hidden
</button>
</div>
)
}