我将我的反应应用程序升级到v.16 +,所以我知道我需要使用包中的PropTypes而不是React,但我无法弄清楚我的代码中有什么问题。我已经在使用包中的PropTypes和webpack捆绑我的应用程序而没有错误,但在浏览器的控制台中我看到:“ TypeError:_react2.default.PropTypes未定义”。
这是我的代码:
import React from 'react';
import PropTypes from 'prop-types';
import { connectRange } from 'react-instantsearch/connectors';
import Slider from 'rc-slider';
import numeral from 'numeral';
class Range extends React.Component {
constructor(props) {
super(props);
this.state = {
currentValues: { min: this.props.min, max: this.props.max },
};
this.onValuesUpdated = this.onValuesUpdated.bind(this);
this.onChange = this.onChange.bind(this);
}
componentWillReceiveProps(sliderState) {
this.setState({
currentValues: {
min: sliderState.currentRefinement.min,
max: sliderState.currentRefinement.max,
},
});
}
onValuesUpdated(values) {
this.setState({ currentValues: { min: values[0], max: values[1] } });
}
onChange(values) {
if (
this.props.currentRefinement.min !== values[0] ||
this.props.currentRefinement.max !== values[1]
) {
this.props.refine({ min: values[0], max: values[1] });
}
}
render() {
const { min = 0, max = 0 } = this.props;
const { currentValues } = this.state;
return (
<div className="ais-Slider__root">
{currentValues.min === undefined && currentValues.max === undefined
? null
: <Slider
max={Math.trunc(max)}
min={Math.trunc(min)}
onAfterChange={this.onChange}
onChange={this.onValuesUpdated}
range
value={[currentValues.min, currentValues.max]}
/>}
<div className="ais-Slider__values">
<div>
{numeral(this.state.currentValues.min).format('0,0')}
</div>
<div>
{numeral(this.state.currentValues.max).format('0,0')}
</div>
</div>
</div>
);
}
}
Range.propTypes = {
currentRefinement: PropTypes.object,
max: PropTypes.number,
min: PropTypes.number,
refine: PropTypes.func,
};
感谢任何人的时间和建议。