react-element-plus

曾经使用 Vue 的同学，还记得 v-if 吗？很可惜，在 React 并没有，这有点记我不爽，于是这个库组件就诞生了！

Install

npm install -D react-element-plus

If/Then/Else

import React, { Component } from 'react'
import v from 'react-element-plus'
 
// 用v生成的代码，页面上是不会有标签生成的
class App extends Component {
   state = {
      value: 1
   }
   render() {
      return (
         <v.if value={false}>
            <v.then>abc</v.then>
            <v.else>ddd</v.else>
         </v.if>
      )
   }
}

import React, { Component } from 'react'
import v, { createElements } from 'react-element-plus'
const [div, span] = createElements('div', 'span')
 
// 用div,sapn可以生成div和span标签，也能传入className等属性
class App extends Component {
   state = {
      value: 1
   }
   render() {
      return (
         <div.if className='div-box' value={false}>
            <span.then>abc</span.then>
            <v.else>ddd</v.else>
         </div.if>
      )
   }
}

Switch/Case

import React from 'react'
import ReactDOM from 'react-dom'
import v, { createElements } from 'react-element-plus'
const [div, span] = createElements('div', 'span')
import './styles.css'
 
class App extends React.Component {
   state = {
      value: 3
   }
 
   render() {
      return (
         <div className='App'>
            <div.switch className='box' value={this.state.value}>
               <span.case value={1} className='red'>
                  Show then
               </span.case>
               <span.case value={2} className='blue'>
                  Show else
               </span.case>
               <span.default>Show default</span.default>
            </div.switch>
         </div>
      )
   }
}

For

import React from 'react'
import ReactDOM from 'react-dom'
import v, { createElements } from 'react-element-plus'
const [div, span] = createElements('div', 'span')
import './styles.css'
 
class App extends React.Component {
   state = {
      list: [{ n: 'a' }, { n: 'b' }, { n: 'c' }]
   }
 
   render() {
      return (
         <div className='App'>
            <v.for
               value={this.state.list}
               render={(item, index) => {
                  return (
                     <div key={index}>
                        {index} - {item.n}
                     </div>
                  )
               }}></v.for>
         </div>
      )
   }
}