在React中使用v-if语法(基于babel)

众所周知在React中并没有像Vue那么多的API，所有功能都要依托于原生JS去实现。这一篇我给大家分享两种封装v-if的方法

• v-for正在撸...敬请期待

• 通过React来封装Condition组件

  • 简单封装了React组件。优点是可读性高；缺点是使用不方便

      import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      
      class Condition extends Component {
        render() {
          return this.props['r-if']? this.props.children : null;
        }
        // 核心思想是通过props来控制组件渲染，为true时渲染children
      }
      
      Render.propTypes = {
        ['r-if']: PropTypes.bool
      };
      
      export default Render;
  复制代码

      //使用
      <Condition r-if = { this.state.show }>
        <div>hello</div>
      </Condition>
  复制代码

• 通过babel中AST来修改element

  • 现代框架（vue，react）渲染阶段：各种loader将vue/jsx文件转换为j