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>我是一些組件內(nèi)容</p>
        </If>
      </div>
    );
  }
}

文檔說明

If 組件

If組件可以使用一個when屬性來控制組件是否渲染

<If when={condition}>
  <p>when在轉(zhuǎn)為bool為true的條件下顯示這個組件</p>
</If>

<If when={condition} children={<p>使用方法同上，單標簽方法中使用</p>} />

Switch 組件

Switch組件可以根據(jù)指定的值渲染不同的組件

Switch組件內(nèi)部使用Case組件對不同的值進行判斷

Switch組件內(nèi)部同時可以使用Default來設(shè)置一個默認顯示組件

<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組件可以對Array、Object遍歷生成一組組件

For組件內(nèi)部也可以使用Default來顯示默認組件

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