1.1.2 • Published 4 years ago
@feizheng/react-condition-manager v1.1.2
react-condition-manager
React condition manager.
installation
npm install -S @feizheng/react-condition-manager
update
npm update @feizheng/react-condition-manager
properties
Name | Type | Default | Description |
---|---|---|---|
items | array | [] | You condition list. |
nodeName | any | 'div' | The container tag name. |
virtual | bool | false | If use react.framgment. |
usage
import css
@import "~@feizheng/react-condition-manager/dist/style.scss"; // customize your styles: $react-condition-manager-options: ()
import js
import RCM from '@feizheng/react-condition-manager'; import ReactDOM from 'react-dom'; import React from 'react'; import './assets/style.scss'; class App extends React.Component { state = { index: 0, status: 'N' }; handleClick(status) { console.log(status); if (status === 'F0') { this.setState({ index: 0, status: 'F0' }); } else if (status === 'F1') { this.setState({ index: 1, status: 'F1' }); } else { this.setState({ status }); } } render() { const { index, status } = this.state; return ( <div className="app-container"> <RCM items={[true, false, true]}> <div>when condition 1</div> <div>when condition 2</div> <div>when condition 3</div> </RCM> <button className="button" onClick={this.handleClick.bind(this, 'N')}> Set Status - N </button> <button className="button" onClick={this.handleClick.bind(this, 'A')}> Set Status - A </button> <button className="button" onClick={this.handleClick.bind(this, 'F0')}> Set Status - F-0 </button> <button className="button" onClick={this.handleClick.bind(this, 'F1')}> Set Status - F-1 </button> <button className="button" onClick={this.handleClick.bind(this, null)}> Set DEFULA </button> <RCM virtual items={[ index === 0 && status === 'N', index === 0 && status === 'A', index === 0 && status === 'F0', index === 1 && status === 'F1', null ]}> <div>when condition 1 ---. N</div> <div>when condition 2 ---. A</div> <div>when condition 3 ---. F (index = 0)</div> <div>when condition 4 ---. F (index = 1)</div> <div>default. null view..</div> </RCM> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));