Use directive in React.
Now you can use r-if
ใr-for
in jsx.
-
Install:
yarn add babel-plugin-react-directive --dev
-
Add to your .babelrc:
{ plugins:[ 'react-directive' ] }
-
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> ) }
-
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> ) }