首页 文章

在将ModalDashboard重构为功能组件时，@ uppy /反应无效的prop类型

提问于
浏览 次
0

我试图使用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>

当我运行此代码时，我得到一个错误：

警告：失败的道具类型：提供给DashboardModal的类型为Object的无效道具，是Uppy的预期实例 .

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

reactjs

1 回答

  • 0

    它应该是 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>
 );
}
    回复于

相关问题