無法在Material UI中獲取Popper

Question

Material-UI版本"@material-ui/core": "^3.7.0"

我需要讓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-這個有Popper

    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。 但是，如果刪除Popper組件，則可以看到Paper組件。 我相信波普爾有問題。

你能幫我嗎？

Answer 1

您確定您的彈出器確實在打開嗎？

您可以通過在popper組件中設置open={true}並查看呈現的內容來對其進行調試。

在我看來，您正在將一個未定義的變量傳遞到您的打開道具中，這將解釋為什么您的Popper無法顯示。 在容器組件中，有以下一行： open={openCard} 。 這應該是open={this.state.openCard} 。