时间戳

首页 > 解决方案 > @uppy/react 将 ModalDashboard 重构为功能组件时无效的道具类型

reactjs - @uppy/react 将 ModalDashboard 重构为功能组件时无效的道具类型

问题描述

我正在尝试使用 uppy-react 作为无状态功能组件，然后我想在我的容器组件中使用它。证监会是这样的：

import React, { Component } from 'react';
import Uppy from '@uppy/core'
import { DashboardModal } from '@uppy/react'
import '../style.css';
import ButtonForm from '../Templates/Button';

const FileUpoad = (uppy) => {
return (
    <div className="container h-100">
    <DashboardModal
        uppy={uppy}
        hideUploadButton={true}
        open={uppy.open}
        onRequestClose={uppy.onRequestClose}
        plugins={[uppy.WebcamId]}
        closeModalOnClickOutside
    />
    </div>
 );
}

export default FileUpoad;

然后在容器组件中：

import FileUpoad from '../Templates/FileUpload';
import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam';

const uppy = new Uppy();

class Container extends Component {
state = {
    modalOpen: false,
}

handleModalOpen = () => {
 this.setState({
   modalOpen: true
 })
}

handleModalClose = () => {
    this.setState({
      modalOpen: false
    })
}

componentDidMount() {
  uppy.use(Webcam, {id: 'myWebcam'});
}

render(){
  <form>
    <ButtonForm
    name='fileUpload'
    onClick={this.handleModalOpen}
    type='button'
    className= 'btn btn-primary btn-block'
    content='Add Picture'
    />
    <FileUpoad
    open={this.state.modalOpen}
    onRequestClose={this.handleModalClose}
    WebcamId = 'myWebcam'
    uppy = {uppy}
    />
  </form>

当我运行此代码时，出现以下错误：

警告：道具类型失败：提供给uppy的道具类型无效，预期实例为。ObjectDashboardModalUppy

我得到了一个奇怪的解决方法，我在无状态功能组件中创建了第二个 uppy 实例（uppy2）并将其传递给 DashoardModal，但这感觉不对。我如何将 uppy 实例作为容器组件的道具传递，以便我可以真正重用功能组件？提前致谢

标签： reactjs

解决方案

应该是uppy.uppy这样的：

const FileUpoad = (uppy) => {
return (
    <div className="container h-100">
    <DashboardModal
        uppy={uppy.uppy}
        hideUploadButton={true}
        open={uppy.open}
        onRequestClose={uppy.onRequestClose}
        plugins={[uppy.WebcamId]}
        closeModalOnClickOutside
    />
    </div>
 );
}

顺便说一句，使用props而不是uppy参数名称会更好，即使它完全是任意的。例如：

const FileUpoad = props => {
return (
    <div className="container h-100">
    <DashboardModal
        uppy={props.uppy}
        hideUploadButton={true}
        open={props.open}
        onRequestClose={props.onRequestClose}
        plugins={[props.WebcamId]}
        closeModalOnClickOutside
    />
    </div>
 );
}

您也可以props像这样解构：

const FileUpoad = ({uppy, open, onRequestClose, WebcamId}) => {
return (
    <div className="container h-100">
    <DashboardModal
        uppy={uppy}
        hideUploadButton={true}
        open={open}
        onRequestClose={onRequestClose}
        plugins={[WebcamId]}
        closeModalOnClickOutside
    />
    </div>
 );
}

推荐阅读