@xianzou/logic-components v1.0.3

@xianzou/logic-components

react版本的逻辑控制组件，让代码更符合语义化，参照nautil代码实现。

Static

静态组件，当shouldUpdate变化的时候才会更新；

 import { Static } from '@xianzou/logic-components';

 <Static
        shouldUpdate={bool}
    >
    <div>{Date.now()}</div>
 </Static>
    # or
 <Static
    shouldUpdate={bool}
    render={() => <div>{Date.now()}</div>}
 />

Each

import { Each } from '@xianzou/logic-components';

<Each
	data={data}
	render={(value, key) =>
   	 <div>{key}: {value}</div>
	} 
 />

For

用于For循环

import { For } from '@xianzou/logic-components';

<For
	data={}
	render={i =>
        <div>{i}</div>
	}
/>

Prepare

准备渲染组件。当遇到一些异步，或动态变化时，你可能希望用一个 loading 效果返回给用户。Prepare 组件用于实现该目的;

import { Prepare } from '@xianzou/logic-components';

<Prepare
	isReady={bool}
	loading={<div>loading</div>}
    render={() =><div>loaded</div>}
/>

Show

通过 is 控制其显示或隐藏

import { Show } from '@xianzou/logic-components';

<Show is={bool}>
    <div>show me</div>
</Show>
# or
<Show is={bool} render={() => <div>show me</div>} />

Swich-case

import { Switch,Case } from '@xianzou/logic-components';

<Switch data={value}>
    <Case is="0">0</Case>
	<Case is="1">1</Case>
	<Case is="1" break>1</Case>
	<Case default>x</Case>
</Switch>

Img

图片加载异常同时显示alt文字说明和默认图片加载异常背景 图片默认最小高度和宽度为48px 请务必自行根据项目设置图片高宽

import { Img } from '@xianzou/logic-components';

<Img alt="图片描述，文字加载失败显示文字" src="图片路径" className="图片类名" ...{otherProps} />