Skip to content
Use directive in React.
JavaScript
Branch: master
Clone or download
孤狼
孤狼 add document
Latest commit 57b3f4a Aug 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Aug 29, 2018
LICENSE Initial commit Aug 29, 2018
README.md add document Aug 29, 2018
index.js add document Aug 29, 2018
package.json add document Aug 29, 2018

README.md

babel-plugin-react-directive

Use directive in React.

Now you can use r-ifr-for in jsx.

Usage:

  1. Install: yarn add babel-plugin-react-directive --dev

  2. Add to your .babelrc:

    {
        plugins:[
            'react-directive'
        ]
    }
    

r-if:

  • Before:

    render(){
        const visible = true
        return(
            <div>
                {
                    visible ? <div>content<div>
                            : ''
                }
            </div>
        )
    }
  • Now:

    render(){
        const visible = true
        return(
            <div>
                <div r-if = {visible}>content</div>
            </div>
        )
    }

r-for:

  • Before:

    render(){
        const list = [1, 2, 3, 4, 5]
        return(
            <div>
                {
                    list.map((item,index)=>(
                    	<div key={index}>{item}</div>
                    ))
                }
            </div>
        )
    }
  • Now:

    render(){
        const list = [1, 2, 3, 4, 5]
        return(
            <div>
                // auto set 'key' to the index.
                <div r-for = {item in list}>{item}</div>
                // or you can set the key manually.
                <div r-for = {(item,index) in list} key = {index+1}>{item}</div>
            </div>
        )
    }
You can’t perform that action at this time.