小巧可嵌套的 React 语句控制组件 react-statements

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/monsterooo/react-statements
• 软件文档: https://github.com/monsterooo/react-statements
• 官方下载: https://github.com/monsterooo/react-statements

软件介绍

react-statements是一个很小的React语句控制组件，更漂亮的条件渲染方法。

安装

npm i --save react-statements
yarn add react-statements

栗子

import { If } from 'react-statements'class Example extends React.Component {
  constructor(props) {
    super(props);    this.state = {logic: true};
  }
  render() {    return (      <div>
        <If when={this.state.logic}>
          <p>我是一些组件内容</p>
        </If>
      </div>
    );
  }
}

文档说明

If 组件

If组件可以使用一个when属性来控制组件是否渲染

<If when={condition}>
  <p>when在转为bool为true的条件下显示这个组件</p>
</If>

<If when={condition} children={<p>使用方法同上，单标签方法中使用</p>} />

Switch 组件

Switch组件可以根据指定的值渲染不同的组件

Switch组件内部使用Case组件对不同的值进行判断

Switch组件内部同时可以使用Default来设置一个默认显示组件

<Switch value={value}>
  <Case when={condition}>
    <p>condition 1</p>
  </Case>
  <Case when={condition}>
    <p>condition 2</p>
  </Case>
  <Case when='c' children={<p>condition 3</p>}/>
  <Default children={<p>默认组件</p>}/>
</Switch>

For

For组件可以对Array、Object遍历生成一组组件

For组件内部也可以使用Default来显示默认组件

<For of={['a', 'b', 'c']}>
  {(item, index) => (<p key={index}>{index}：{item}</p>)}  <Default>默认组件</Default></For>

本文地址：https://codercto.com/soft/d/2847.html