React condition manager.
npm install @feizheng/react-condition-managershell
npm install -S @feizheng/react-condition-manager
`update
`shell
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
1. import css
`scss
@import "~@feizheng/react-condition-manager/dist/style.scss"; // customize your styles:
$react-condition-manager-options: ()
`
2. import js
`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 (
when condition 1
when condition 2
when condition 3
virtual
items={[
index === 0 && status === 'N',
index === 0 && status === 'A',
index === 0 && status === 'F0',
index === 1 && status === 'F1',
null
]}>
when condition 1 ---. N
when condition 2 ---. A
when condition 3 ---. F (index = 0)
when condition 4 ---. F (index = 1)
default. null view..
);
}
} ReactDOM.render( , document.getElementById('app'));
``