我有一个父组件。
<RefreshSelect
isMulti
cacheOptions
id='a'
key = 'a'
components={makeAnimated()}
options={this.state['filter']['provider']}
onChange={this.handleChangeProvider}
/>
<RefreshSelect
isMulti
cacheOptions
id='b'
key='b'
components={makeAnimated()}
options={this.state['filter']['provider']}
onChange={this.handleChangeProvider}
/>
在这个子组件的定义中,我有一个构造函数,它会根据id/key更新默认值。
export default class RefreshSelect extends Component {
constructor(props) {
super(props);
// console.log(props)
// console.log(props.key)
if (props.key==''){
this.state = { value: [{ value: 'all', label: 'all', color: '#666666' }] };
}else if ( props.key=='a') {
this.state = { value: [{ value: '123', label: '123', color: '#666666' },
{ value: '234', label: '234', color: '#666666' },
{ value: '456', label: '456', color: '#666666' }] };
}else {
this.state = { value: [{ value: 'nvnvnvnvn', label: 'ksksksksks', color: '#666666' }] };
}
}
render() {
console.log(this.props)
return (
<Select
isMulti
defaultValue={this.state.value}
options={this.props.options}
components={makeAnimated()}
placeholder={this.props.label}
onChange={this.props.onChange}
/>
);
}
}
首先,似乎我不能在构造函数中分配键并访问它。这是为什么呢? 其次,id和key之间有什么区别?我应该在什么时候使用哪个?
key
不是一个常规的属性,也不应该被操纵(虽然有一些罕见的用例,但你需要确切地知道你在做什么)。 - Dupocas