Я занимаюсь разработкой веб-сайта и хотел бы, чтобы одна сторона была отображена в зависимости от того, какое значение назначено в AppContext.Тем не менее, когда я использую AppContext.Consumer в функции рендеринга перед возвратом, я получаю следующую ошибку:
Ожидается присваивание или вызов функции, и вместо этого он видит expression.eslint (no-unused-expressionions)
Я хотел бы использовать это, чтобы я мог условно установить значение для компонента, которое я бы поставил взамен после устранения ошибки.Вот мой текущий код:
import React from 'react';
import { IconButton, Grid, Typography } from '@material-ui/core';
import ArrowForward from '@material-ui/icons/ArrowForward';
import { withStyles } from '@material-ui/core/styles';
import CheckBoxGroup from '../utils/CheckBoxGroup';
import CheckBox from '../utils/CheckBox';
import AppContext from '../utils/AppContext';
const styles = theme => ({
container: {
alignItems: 'center',
border: 'black',
'border-width': 'medium',
'margin-top': '80px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
item: {
width: '100%',
'text-align': 'center',
'border-radius': '5px',
'margin-top': '10px'
}
});
class FormEmergencyType extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {
lifeatdanger: props.emergencyTypes.lifeatdanger,
injury: props.emergencyTypes.injury,
illness: props.emergencyTypes.illness,
poisoning: props.emergencyTypes.poisoning,
firesmoke: props.emergencyTypes.firesmoke,
other: props.emergencyTypes.other
};
this.handleChange = this.handleChange.bind(this);
}
//somehow manage global variable set on Landingpage specifying whether police or ambulance
handleChange(event, checked) {
let new_state = this.state;
switch (event.target.value) {
case 'lifeatdanger':
new_state['lifeatdanger'] = checked;
break;
case 'injury':
new_state['injury'] = checked;
break;
case 'illness':
new_state['illnes'] = checked;
break;
case 'poisoning':
new_state['poisoning'] = checked;
break;
case 'firesmoke':
new_state['firesmoke'] = checked;
break;
case 'other':
new_state['other'] = checked;
break;
default:
break;
}
this.setState(new_state);
this.props.handleEmergencyType(new_state);
}
//icon next to the buttons
render() {
let component;
<AppContext.Consumer>; let component;</AppContext.Consumer>;
return (
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={this.classes.item}>
<Typography variant="h5">Who do you want to contact?</Typography>
<CheckBoxGroup>
<CheckBox
title="Life at danger"
onChange={this.handleChange}
checked={this.state['lifeatdanger']}
value="lifeatdanger"
/>
<CheckBox
title="Injury"
onChange={this.handleChange}
checked={this.state['injury']}
value="injury"
/>
<CheckBox
title="Illness"
onChange={this.handleChange}
checked={this.state['illnes']}
value="illnes"
/>
<CheckBox
title="Poisoning"
onChange={this.handleChange}
checked={this.state['poisoning']}
value="poisoning"
/>
<CheckBox
title="Fire / Smoke"
onChange={this.handleChange}
checked={this.state['firesmoke']}
value="firesmoke"
/>
<CheckBox
title="Other"
onChange={this.handleChange}
checked={this.state['other']}
value="other"
/>
</CheckBoxGroup>
<Grid />
<Grid
item
sm={12}
className={(this.classes.item, this.classes.forwardbutton)}
>
<IconButton
edge="start"
color="black"
onClick={this.props.handleComponentType}
>
<ArrowForward />
</IconButton>
</Grid>
</Grid>
</Grid>
);
}
}
export default withStyles(styles)(FormEmergencyType);
Большое спасибо заранее за вашу помощь!