React 可选择性的使用自有 state 或者 props 元件

Question

我想做一个如果有props有value传入，就使用props的value，没有传入的话，就使用自有状态的元件代码如下DEMO:https://stackblitz.com/edit/r...importReactfrom'react';exportdefaultclassMyInputextendsReact.Component{constructor(props){super(props);this.state={value:(typeofthis.props.value==='string')?this.props.value:''}}componentWillReceiveProps(nextProps){if((typeofthis.props.value==='string')?this.props.value:''){this.setState({value:nextProps.value})}}handleChange=(e)=>{if(this.props.onChange){this.props.onChange(e);}else{this.setState({value:e.target.value});}}handleClick=(e)=>{if(this.props.onClick){this.props.onClick(e);}else{}}render(){return}}但我认为这样的代码有点冗长，似乎考虑不周，请问有没有这种元件的比较好的写法可以推荐呢？

Answer 1

首先，不要在constructor()方法中，使用this.props，这个写法在IE下无法兼容。
其次，componentWillReceiveProps()方法，将会废弃。
可以做如下的修改：
render(){
const{value=this.state.value}=this.props;
return
}
你的需求是项目中最常见的使用方式:
importReactfrom'react';
exportdefaultclassMyInputextendsReact.Component{
constructor(props){
super(props);
this.state={value:''};
}
handleChange=(e)=>{
if(this.props.onChange){
this.props.onChange(e);
}else{
this.setState({value:e.target.value});
}
}
handleClick=(e)=>{
if(this.props.onClick){
this.props.onClick(e);
}else{
}
}
render(){
const{value=this.state.value}=this.props;
return
}
}