Nice Philanthropist Metalhead

    react-statements

    1.0.2 • Public • Published

    react-statements · GitHub license npm version

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

    起源一些工作中的思考

    安装

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

    栗子

    Edit react-statements-example

    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可以接收一个ArrayObject来作范围的判断

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

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

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

    未来

    正在计划扩展这个库,如果有兴趣和任何想法欢迎提issues或email: createthink.net@gmail.com

    问题

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

    License

    react-statements使用MIT licensed.

    Keywords

    none

    Install

    npm i react-statements

    DownloadsWeekly Downloads

    8

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    5

    Last publish

    Collaborators

    • monsterooo