ES-lint希望我在{this.state.dropDownValue}
中使用解构状态赋值。但如果我这样做,dropDownValue
就会变得不确定。对于如何解决这个问题,有任何的建议吗?谢谢!
const dropDownList = [
<FormattedMessage id="bottomPanel.adherenceScores" />,
<FormattedMessage id="bottomPanel.adherenceJourney" />,
<FormattedMessage id="bottomPanel.adherenceTrends" />,
];
class BottomPanel extends React.Component<Props, {}> {
constructor(props) {
super(props);
this.dropDownUpdate = this.dropDownUpdate.bind(this);
}
state = {
dropDownValue: dropDownList[0]
};
dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
render() {
return() {
<div>
<UncontrolledDropdown>
<DropdownToggle tag="div" className="test">
<div className="bottompanel-dropdown">{this.state.dropDownValue}</div>
</DropdownToggle>
</UncontrolledDropdown>
</div>
}
}
如果this.state
是{ dropDownValue: 'something' }
那么你应该能够使用你的const { dropDownValue } = this.state;
函数中的render
对其进行解构。
render() {
const { dropDownValue } = this.state;
return() {
<div>
<UncontrolledDropdown>
<DropdownToggle tag="div" className="test">
<div className="bottompanel-dropdown">{dropDownValue}</div>
</DropdownToggle>
</UncontrolledDropdown>
</div>
}
}