К примеру чтобы скрыть компонент пишим следующий код:
import FeaturesToggle from 'containers/features-toggl.js';
class TestComponent extends Component {
render() {
return <FeaturesToggle f={{anomaly: true}}>
<Anomaly/>
</FeaturesToggle>
}
}
Теперь компонент будет показываться только если в урле будет следующий параметр ?f=anomaly:true
.
Так же можно задавать составные условия к примеру:
class TestComponent extends Component {
render() {
return <FeaturesToggle f={{anomaly:true, cropPerformance:true}}>
<Anomaly/>
</FeaturesToggle>
}
}
Будет показан только при условии ?f=anomaly:true,cropPerformance:true
Для этого нужно замапить свойство из редакса и импортировать ф-цию из утилсов:
import {compareBoolProps} from '../_utils';
class TestComponent extends Component {
testToShow = () => compareBoolProps({anomaly: true}, this.props.featuresToggle)
render() {
return this.testToShow() ? 'I am visible' : null;
}
}
const mapStateToProps = state => ({
featuresToggle: state.global.featuresToggle,
});
export default connect(
mapStateToProps, null
)(TestComponent);
Свойство featuresToggle всегда хранит в себе актуальное состояние гет параметра f
в котором записана строка конфигурации