babel-plugin-jsx-directive

为jsx提供了一些便于开发的指令

提供了以下类似Vue的指令集

1. if（类似v-if）
2. elseIf
3. else
4. model（类似v-model)

安装 && 使用

npm i babel-plugin-jsx-directive

.babelrc

{
    "plugins": [
        "babel-plugin-jsx-directive"
    ]
}

条件判断指令（if, elseIf, else）

a = <div>
    <a if={true}>1</a>
    
    <a if="333" href="https://www.baidu.com">a</a>
    <b elseIf={4 + 5 > 10}>b</b>
    <d else>d</d>
    
    <a if="333">a</a>
    <c elseIf="3">c</c>
</div>

以上代码会被编译成

a = <div>
    {true && <a>1</a>}
    
    {
        "333" 
            ? <a href="https://www.baidu.com">a</a>
            : (4 + 5 > 10 ? <b>b</b> : <d>d</d>)         
    }

    {
        "333" 
            ? <a>a</a>
            : ("3" && <c>c</c>)
    }
</div>

model指令

类似Vue的v-model

let a = <input model={this.state.text}/>

代码model={this.state.text}会被分解为value和onChange属性 编译后如下

let a = <input value={this.state.text} onChange={(e) => this.setState({text: e.target.value})}/>

属性和取值方式

默认情况下

当model指令被使用在type的值为text、select、textarea的input元素上时会使用，value属性和onChange事件，且取值方式为e.target.value

<input model={this.state.text} type="text"/>;
<input model={this.state.text} type="select"/>;
<input model={this.state.text} type="textarea"/>;

// 以上会被编译成

<input value={this.state.text} onChange={(e) => this.setState({text: e.target.value})} type="text"/>;
<input value={this.state.text} onChange={(e) => this.setState({text: e.target.value})} type="select"/>;
<input value={this.state.text} onChange={(e) => this.setState({text: e.target.value})} type="textarea"/>;

当model指令被使用在checkbox、radio元素上时会使用，checked属性和onChange事件，且取值方式为e.target.checked

<input model={this.state.text} type="checkbox"/>;
<input model={this.state.text} type="radio"/>;

// 以上会被编译成

<input value={this.state.text} onChange={(e) => this.setState({text: e.target.checked})} type="checkbox"/>;
<input value={this.state.text} onChange={(e) => this.setState({text: e.target.checked})} type="radio"/>;

当model指令被使用在其他元素上时使用value属性和onChange事件，且取值方式为e

<Component model={this.state.text}/>;
<Input model={this.state.text}/>;
<Input.xxxx model={this.state.text}/>;

// 以上会被编译成
<Component value={this.state.text} onChange={(e) => this.setState({text: e})}/>;
<Input value={this.state.text} onChange={(e) => this.setState({text: e})}/>;
<Input.xxxx value={this.state.text} onChange={(e) => this.setState({text: e})}/>;

*model的值必须为this.state.xxx.xxx.xxx*的形式

<Component model={this.state.a}/>;        // √
<Component model={this.state.a.b}/>;      // √
<Component model={this.state.a.b.c}/>;    // √

<Component model={3}/>;                   // ×
let x = 3;
<Component model={x}/>;                   // ×

<Component model={this.state.a.b.c}/>;

// 会被编译成

<Component 
    value={this.state.a.b.c} 
    onChange={
        e => this.setState({
            a: Object.assign({}, this.state.a, {
                b: Object.assign({}, this.state.a.b, {
                    c: e
                })
            })
        })
    }
/>;

修饰符设置属性和取值方式

1. 设置属性：可以使用_接在model指令之后来设置其取值属性和取值方式

<Component model_checked={this.state.a}/>;    // 使用checked属性
<Component model_value={this.state.a}/>;      // 使用value属性

2. 设置取值方式：目前一共有3种取值方式。

event: `e.target.value`
eventChecked: `e.target.checked`
component: `e`

在设置属性之后再使用_拼接

<Component model_checked_eventChecked={this.state.a}/>;    // 使用checked属性，取值为e.target.checked
<Component model__component={this.state.a}/>;      // 使用默认的value属性，取值方式为e

设置选项

设置指令名称

设置if指令的名称ifAttrName，值为string

设置else指令的名称elseAttrName，值为string

设置elseIf指令的名称elseIfAttrName，值为string

设置model指令的名称modelAttrName，值为string

{
    "plugins": [
        [
            "babel-plugin-jsx-directive",
            {
                "ifAttrName": "v-if",
                "elseAttrName": "v-else",
                "elseIfAttrName": "v-else-if",
                "modelAttrName": "v-model"
            }
        ]
    ]
}

设置启用禁用

设置if指令的启用禁用ifAttrName，值为boolean

设置else指令的启用禁用elseAttrName，值为boolean

设置elseIf指令的启用禁用elseIfAttrName，值为boolean

设置model指令的启用禁用modelAttrName，值为boolean

{
    "plugins": [
        [
            "babel-plugin-jsx-directive",
            {
                "ifEnable": false,
                "elseEnable": false,
                "elseIfEnable": false,
                "modelEnable": false
            }
        ]
    ]
}