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>} />

If组件内部可以使用Default组件, 在when条件为false的时候渲染.

<If when={false}>
  <p>↔️我是一些组件内容</p>
  <Default>when条件为false渲染的组件</Default>
</If>

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>

Range

Range组件可以对范围进行判断然后渲染组件

Range可以使用type属性对范围进行in``notint的判断

Range组件的value可以接收一个Array或Object来作范围的判断

Range组件的when可以指定范围的值，如果value是数组直接指定值，如果value是一个对象可以指定对象的键或对象的值

Range组件的whenKey是当value为对象是，用来指定when是判断的value的键而非值

<Range type="in" value={[1,2,3]} when={1}>
  <p>在数组范围之中</p>
</Range>
<Range type="in" value={[1,2,3]} when={4}>
  <p>这个组件不会显示，when值不在value之中</p>
</Range>
<Range type="in" value={{ a: 'test1', b: 'test2' }} when="test2">
  <p>value对象的值包含when的值</p>
</Range>
{ /* whenKey用来指定判断的是value的键 */ }
<Range type="in" value={{ a: 'test1', b: 'test2' }} when='b' whenKey>
  <div>
    <p>可以判断对象的key值是在when中</p>
  </div>
</Range>
<Range type="notin" value={[1,2,3]} when={4}>
  <p>不在数组范围之中</p>
</Range>
<Range type="notin" value={{ a: 'test1', b: 'test2' }} when="test3">
  <p>value对象的值不包含when的值</p>
</Range>
{ /* whenKey用来指定判断的是value的键 */ }
<Range type="notin" value={{ a: 'test1', b: 'test2' }} when='c' whenKey>
  <div>
    <p>可以判断对象的key值不是在when中</p>
  </div>
</Range>

For

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

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

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

未来

正在计划扩展这个库，如果有兴趣和任何想法欢迎提issues或email: [email protected]

问题

如果在使用过程中有任何问题或建议可以在issues提出

License

react-statements使用MIT licensed.