Question

我正在尝试将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的预期实例Object的{{1}}类型的道具DashboardModal无效。

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

Answer 1

应为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>
 );
}

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

1 个答案: