javascript - What is the difference between key and id in React component? - Stack Overflow

admin管理员组

文章数量:1395744

I have this in the parent ponent.

          <RefreshSelect
            isMulti
            cacheOptions
            id='a'
            key = 'a'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />
          <RefreshSelect
            isMulti
            cacheOptions
            id='b'
            key='b'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />

In the definition of this child ponent, I have the constructor that updates default values depending on the 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}
        ponents={makeAnimated()}
        placeholder={this.props.label}
        onChange={this.props.onChange}
      />
    );
  }
}

First, it looks like I'm not able to assign the key and access it in the constructor. Why is that? Secondly, what is the difference between id and key? Which one should I use and when?

I have this in the parent ponent.

          <RefreshSelect
            isMulti
            cacheOptions
            id='a'
            key = 'a'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />
          <RefreshSelect
            isMulti
            cacheOptions
            id='b'
            key='b'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />

In the definition of this child ponent, I have the constructor that updates default values depending on the 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}
        ponents={makeAnimated()}
        placeholder={this.props.label}
        onChange={this.props.onChange}
      />
    );
  }
}

First, it looks like I'm not able to assign the key and access it in the constructor. Why is that? Secondly, what is the difference between id and key? Which one should I use and when?

• javascript
• reactjs

Share Improve this question Follow asked Nov 30, 2020 at 0:12 FocusFocus 1,01322 gold badges1212 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

key is a special prop that helps React identify which items have changed, are added, or are removed inside lists. Keys should be given to the elements inside an array of ponents to give the elements a stable identity.

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

id probably refers to the HTML attribute and it's going to be spreaded inside the original DOM element implemented by Select

Also you probably don't want to use index as key

本文标签： javascriptWhat is the difference between key and id in React componentStack Overflow