jsx写法 插槽不生效的问题

Question

在使用 vue jsx 写法 完成 el-upload uploadList插槽遇到问题

//模板使用没问题
<el-upload>
 <div slot="file" slot-scope="{file}">
      <el-link>{{file}}</el-link>
</div>
</el-upload>

//jsx尝试几种皆无法实现
//1.
render(h){
  return 
    <el-upload>
         <div
          slot={'file'}
          {...{
            scopedSlots: {
              file: scope => {
                <el-link> {scope}</el-link>
              }
            }
          }
          }
        >
      </div>
    </el-upload>
}

//2.
render(h){
  return 
    <el-upload>
        <div
        v-slots={{
        file: () => (
           <el-link> {scope}</el-link>
         )}}
       >
</div>
    </el-upload>
}

//3.
render(h){
return h('el-upload',
h('div',{
scopedSlots:{
          file: props =>{
           return <el-link>hhhh</el-link>
         }
        },
})
)
}

以上是我能想到的替代方法皆不能实现，还请大家指出问题所在，和解决办法 感谢

Answer 1

let scopedSlots = {
            //defaul 默认具名插槽
            file: props => {
              return (
               // props 就相当于 slot-scope="{title}" 里面的值
                  <div class="preview_img_list"  onClick={e=> this.previewImgList(img_arr,props.file.url)}>
                    <img src={props.file.url}/>
                  </div>
              );
            }
          }

<el-upload
  action=""
   {...{ scopedSlots }}>
</el-upload>