Не удалось получить Popper в интерфейсе материалов

Question

Версия Material-UI "@material-ui/core": "^3.7.0"

Мне нужно показать Popper при наведении на что-то, и я не могу видеть Popper

Это контейнер для Popper

    import PropTypes from 'prop-types';
    import React from 'react';
    import InfoCard from './InfoCard';
    import Snackbar from '@material-ui/core/Snackbar';

    class ContainerInfoCard extends React.Component {

      state = {
        copyNotify: false,
        // 
        openCard: false,

        anchorEl: null,
      };

      onUserHoverHandle = event => {
        const { currentTarget } = event;
        this.setState({
          anchorEl: currentTarget,
          openCard: true
        });
      };

      handleCloseUserCard = event => {
        this.setState({
          anchorEl: null,
          openCard: false,
        });
      };

      handleSnackbarClose = (e) => {
        e && e.preventDefault();
        this.setState({
          copyNotify: false,
        });
      };

      render() {
        const { children } = this.props;
        const id = openCard ? 'popper-card' : null;

        return(
          <div>
            <div onMouseLeave={this.handleCloseUserCard}>
              <div 
                onMouseEnter={this.onUserHoverHandle}
                aria-describedby={id}
              >
                {children}
              </div>
              { openCard && (
                <InfoCard 
                  id={id}
                  node={anchorEl}
                  fullName="Full name" 
                  emailAddress="example@gmail.com"
                  open={openCard}
                />
              )}
            </div>
            <Snackbar
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              open={this.state.copyNotify}
              onClose={this.handleSnackbarClose}
              autoHideDuration={1000}
              ContentProps={{
                'aria-describedby': 'message-id',
              }}
              message={<span id="message-id"> Email copied</span>}
            />
          </div>
        );
      }
    }

    export default ContainerInfoCard;

InfoCard - эта карта имеет Поппер

    import Grid from '@material-ui/core/Grid';
    import Paper from '@material-ui/core/Paper';
    import Popper from '@material-ui/core/Popper';
    import React from 'react';
    import { withStyles } from '@material-ui/core/styles';
    import Fade from "@material-ui/core/Fade";

    const styles = theme => ({
      root: {
        pointerEvents: 'none',
      },
      paper: {
        minWidth: '300px',
        minHeight: '60px',
        padding: theme.spacing.unit * 2,
      },
    });

    class InfoCard extends React.Component {

      render() {
        const { 
          classes, 
          fullName, 
          emailAddress, 
          open, 
          node,
          id,
        } = this.props;

        return(
          <Popper
            id={id}
            open={open} 
            anchorEl={node} 
            placement="left-start"
            modifiers={{
              preventOverflow: {
                enabled: true,
                boundariesElement: 'viewport',
              },
            }}
            transition
          >
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={350}>
                <Paper className={classes.paper}>
                  <Grid container>
                    <Grid item>
                      {fullName}
                    </Grid>
                    <Grid item>
                      {emailAddress}
                    </Grid>
                    </Grid>
                  </Grid>
                </Paper>
              </Fade>
            )}
          </Popper>
        );
      }
    }

    export default InfoCard;

Я не могу видеть только Поппера.Но если я удаляю компонент Popper, я вижу компонент Paper.Я думаю, что есть проблема с Поппером.

Можете ли вы помочь мне, пожалуйста?

Answer 1

Вы уверены, что ваш popper действительно открывается?

Вы можете отладить это, установив open={true} в компоненте popper и посмотрев, что отображается.

Похоже, вы похожи на меняпередают неопределенную переменную в вашу открытую подпорку, что объясняет, почему ваш поппер не показывает.В вашем компоненте контейнера есть строка: open={openCard}.Это должно быть open={this.state.openCard}.