众所周知在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
-