javascript - 无法在 Material UI 中获取 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;

信息卡 - 这个有 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 组件 我可以看到 Paper 组件。我相信 Popper 有问题。

你能帮我一下吗？

Answer 1

您确定您的弹出器确实打开了吗？

您可以通过在 popper 组件中设置 open={true} 并查看呈现的内容来调试此问题。

在我看来，您正在将一个 undefined variable 传递到您的 open 属性中，这可以解释为什么您的 popper 没有显示。在您的容器组件中，有以下行:open={openCard}。这应该是 open={this.state.openCard}。