React组件中key和id的区别是什么？

Question

React组件中key和id的区别是什么？

3

我有一个父组件。

          <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之间有什么区别？我应该在什么时候使用哪个？

- typing...

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dupocas · Accepted Answer

key 是 React 中的一个特殊属性，它帮助 React 识别哪些列表项已经改变、添加或删除。应当为组件数组中的元素提供 key 属性，以赋予这些元素稳定的标识。

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

id 可能是指 HTML 属性，并且它将被传播到由 Select 实现的原始 DOM 元素中。

此外，您可能不想使用索引作为键值。