React IF 条件判断组件 #react

If.js

import React from 'react'
import PropTypes from 'prop-types'

class IF extends React.PureComponent {
  static defaultProps = {
    fallback: null
  }
  static propTypes = {
    children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
      .isRequired,
    fallback: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
    condition: PropTypes.bool.isRequired
  }

  render () {
    const { children, condition, fallback } = this.props
    return condition ? children : fallback
  }
}

export default IF

usage.md

Usage:

<IF condition={this.state.showSecret} fallback="YOU CANNOT SEE!">
  <h3>And here it is - a secret key</h3>
</IF>

Props:

name	type	required	default	description
children	element, string	✓		条件判断子元素
condition	bool	✓		条件判断语句
fallback	element, string			不满足条件渲染的展示