react-statements 小巧可嵌套的 React 语句控制组件 项目简介
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>ForFor组件可以对Array、Object遍历生成一组组件For组件内部也可以使用Default来显示默认组件<For of={['a', 'b', 'c']}>
{(item, index) => (<p key={index}>{index}:{item}</p>)} <Default>默认组件</Default></For>
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>ForFor组件可以对Array、Object遍历生成一组组件For组件内部也可以使用Default来显示默认组件<For of={['a', 'b', 'c']}>
{(item, index) => (<p key={index}>{index}:{item}</p>)} <Default>默认组件</Default></For>