javascript - React 组件中的 key 和 id 有什么区别？

Question

我在父组件中有这个。

          <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}
      />
    );
  }
}

首先，我似乎无法分配 key 并在构造函数中访问它。这是为什么？其次，id和key有什么区别？我应该使用哪一个？什么时候使用？

Answer 1

key是一个特殊的 prop ，它帮助 React 识别列表中哪些项目已更改、添加或删除。应为组件数组中的元素提供键，以赋予元素稳定的身份。

Array.from({ length: 5 }).fill(0).map((_,index) => <span key={index} />)

id 可能指的是 HTML attribute它将在 Select

实现的原始 DOM 元素中展开

此外，您可能不想使用 index as key