Question

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

render() {

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

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

对于每个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 > })
  }

如何将道具传递给仅更改一个值的组件

1 个答案: