javascript - 无法在Material UI中获取Popper

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="[email protected]"
                  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组件。我相信波普尔有问题。

你能帮我吗？

最佳答案

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

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

在我看来，您正在将一个未定义的变量传递到您的打开道具中，这将解释为什么您的Popper无法显示。在容器组件中，有以下一行：open={openCard}。这应该是open={this.state.openCard}。

关于javascript - 无法在Material UI中获取Popper，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54745642/