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

码农软件 · 软件分类 · 常用JavaScript包 · 2019-04-04 14:56:24

软件介绍

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组件可以对ArrayObject遍历生成一组组件

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

CSS3 For Web Designers

CSS3 For Web Designers

Dan Cederholm / Happy Cog / 2010-11 / $18

From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilit......一起来看看 《CSS3 For Web Designers》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具