javascript - 如何将 Prop 传递给仅更改一个值的组件

Question

我必须以这种方式在页面中的不同时间渲染组件:

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>

如果没有为 propsUpload 定义 3 个常量，我怎样才能达到这个目标？换句话说，我想避免这种情况:

 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'
 }

谢谢

Answer 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 > })
  }