Блог

Главная - Вопросы по программированию - Как передать реквизит компоненту, изменив только одно значение

Как передать реквизит компоненту, изменив только одно значение

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я должен визуализировать компонент в разное время на странице таким образом:

 render() {

  const propsUpload = {
     customRequest: this.uploadMedia,
     listType: 'picture',
     defaultFileList: [],
     className: 'upload-list-inline',
  }

  return (
     <Upload  {...propsUpload}> </Upload>
     <Upload  {...propsUpload}> </Upload>
     <Upload  {...propsUpload}> </Upload>
  )
}

Для каждого компонента загрузки мне нужно добавить ключ в propsUpload.
Я попробовал различное решение, но никто не сработал.
Мне нужно что-то вроде этого:

 <Upload  {...propsUpload, key:'1'}> </Upload>
<Upload  {...propsUpload, key:'2'}> </Upload>
<Upload  {...propsUpload, key:'3'}> </Upload>

Как я могу достичь этой цели, не определяя 3 константы для propsUpload?
Другими словами, я хочу избежать этого:

  const propsUpload1 = {
    customRequest: this.uploadMedia,
    listType: 'picture',
    defaultFileList: [],
    className: 'upload-list-inline',
    key : '1'
 }
 const propsUpload2 = {
    customRequest: this.uploadMedia,
    listType: 'picture',
    defaultFileList: [],
    className: 'upload-list-inline',
    key : '2'
 }
 const propsUpload3 = {
    customRequest: this.uploadMedia,
    listType: 'picture',
    defaultFileList: [],
    className: 'upload-list-inline',
    key : '3'
 }

Спасибо

Комментарии:

1. Попробуйте <Upload key="1" {...propsUpload} />

2. Не сработало, потому что я использую api, который возвращает мне объект «propsUpload», поэтому мне нужно иметь значение ключевого свойства в этом объекте

3. Я думаю, что ваш код для распространения объекта и слияния ключа был бы хорошим решением, но почему это не работает? Единственное, о чем я могу думать, это то, что это может выглядеть так: {...propsUpload,{key:'3'}} чтобы объединить два объекта вместе

Ответ №1:

Попробуйте это

 render() {
    const propsUpload = {
      customRequest: this.uploadMedia,
      listType: 'picture',
      defaultFileList: [],
      className: 'upload-list-inline',
    }

    return [1, 2, 3].map((item) => { return <Upload  {...propsUpload} key={item}> </Upload > })
  }
Метки: