Проблема с вложенными компонентами функций. «Компонентам функций нельзя давать ссылки». - PullRequest
Новая
       34

Проблема с вложенными компонентами функций. «Компонентам функций нельзя давать ссылки».

0 голосов
/ 22 апреля 2020

Я пытаюсь использовать Material-UI Modal и Fade API с реактивной лентой Card. Я не могу понять, почему выдается следующее предупреждение. Буду признателен, если кто-нибудь может указать мне правильное направление.

Предупреждения - 

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Transition`.
    in Card (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by TrapFocus)
    in TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef)
    in ForwardRef
    in ReactPlaceholder (created by AsyncFunc)
    in AsyncFunc (created by Context.Consumer)
    in Route (created by OnBoarding) ....

Код для функционального компонента. 

import React from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import {Card, CardBody, CardHeader} from 'reactstrap';

const OnBoarding = ({match, history}) => {
    const [open, setOpen] = React.useState(true);

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={open}
            onClose={handleClose}
            closeAfterTransition
            disableBackdropClick
            disableEscapeKeyDown
            BackdropComponent={Backdrop}
            BackdropProps={{
                timeout: 500,
            }}
        >
            <Fade in={open}>
                <Card className="shadow border-0 w-75 d-flex on-boarding">
                    <CardHeader className="bg-primary text-white">
                       Card Header
                    </CardHeader>
                    <CardBody>                    
                      Card Body 
                    </CardBody>
                </Card>
            </Fade>
        </Modal>
    );
}
...