javascript - 如何在 material-ui 组件上设置 HTML 元素 ID？

Question

我有一个使用 Gatsby.js 使用 Material-UI 构建的网站.

具体问题是这样的:我想使用 Google 跟踪代码管理器的“元素可见性”触发器。如果一些 HTML 元素变得可见，GTM 应该触发一些 GA 标签。

问题是:如何为 GTM(或其他任何东西)指定 material-ui 组件的 HTML ID 以找到它？

第一个例子:

// ...react imports omitted...
import makeStyles from '@material-ui/core/styles/makeStyles';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import CloseIcon from '@material-ui/icons/Close';

import Link from '~components/Link';
import ButtonSubmit from '~components/form-buttons/ButtonSubmit';
import Container from '~components/Container';

// ... all other imports are in-house code

const useStyles = makeStyles(theme => ({ /* ...styles... */}));

const GuestUserSoftSaleSecondPopup = ({ which, ...rest }) => {
  const classes = useStyles();

  // ...setup code omitted...

  return (
    <Box bgcolor="#474d5c" width="100%" py={4} className={classes.banner}>
      <Container>
        <Grid container direction="row" justify="space-between" alignItems="center" spacing={2}>
          <Grid item xs={12} sm={1} md={3} lg={4}>
            <CloseIcon onClick={handleClose} size="large" className={classes.closeIcon} />
          </Grid>

          <Grid item xs={12} sm={7} md={5} lg={4}>
            <Link to="/subscribe" variant="h5" className={classes.linkStyle}>
              Become a member for full access
            </Link>
          </Grid>
          <Grid item xs={12} sm={4} className={classes.buttonPosition}>
            <Link to="/subscribe" underline="none" className={classes.linkStyle}>
              <ButtonSubmit type="button" fullWidth={false}>
                See my option
              </ButtonSubmit>
            </Link>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};
// ...proptypes and `export` clause

第二个例子:

// ...react imports omitted...
import makeStyles from '@material-ui/core/styles/makeStyles';
import MuiDialog from '@material-ui/core/Dialog';

const useStyles = makeStyles(() => ({ /* ...styles... */ }));

const Dialog = ({ children, background, backdrop, isOpen, ...rest }) => {
  const classes = useStyles({ background });
  return (
    <MuiDialog
      open={isOpen}
      maxWidth="sm"
      fullWidth
      disableBackdropClick
      disableEscapeKeyDown
      BackdropProps={{
        className: backdrop ? classes.backdropBM : classes.backdrop
      }}
      PaperProps={{
        className: classes.paper
      }}
      scroll="body"
      {...rest}
    >
      {children}
    </MuiDialog>
  );
};

Answer 1

如果您查看几乎所有 Material-UI 组件的 API 文档，您会在“Props”部分的末尾找到一条声明，类似于 Dialog 中的以下示例:

Any other props supplied will be provided to the root element (Modal).

这意味着任何未被该组件明确识别的 props 最终都将传递给呈现的最外层元素的任何 HTML 元素。所以对于大多数 Material-UI 组件，为了添加一个 id属性，您只需指定它即可。

我下面的示例(对 Simple Dialog demo 的修改)包括三个不同的 ID:一个在 Dialog 上将放置在最外层的元素 div的 Modal , 一个通过 PaperProps 指定的这将继续Paper div对话框的可见内容，一个在 Box 上环绕对话框内容。

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Avatar from "@material-ui/core/Avatar";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import PersonIcon from "@material-ui/icons/Person";
import Typography from "@material-ui/core/Typography";
import { blue } from "@material-ui/core/colors";
import Box from "@material-ui/core/Box";

const emails = ["username@gmail.com", "user02@gmail.com"];
const useStyles = makeStyles({
  avatar: {
    backgroundColor: blue[100],
    color: blue[600]
  }
});

function SimpleDialog(props) {
  const classes = useStyles();
  const { onClose, selectedValue, open } = props;

  const handleClose = () => {
    onClose(selectedValue);
  };

  const handleListItemClick = value => {
    onClose(value);
  };

  return (
    <Dialog
      onClose={handleClose}
      aria-labelledby="simple-dialog-title"
      open={open}
      PaperProps={{ id: "MyDialogPaperID" }}
      id="ThisIDWillBeOnTheModal"
    >
      <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
      <Box id="MyBoxID">
        <List>
          {emails.map(email => (
            <ListItem
              button
              onClick={() => handleListItemClick(email)}
              key={email}
            >
              <ListItemAvatar>
                <Avatar className={classes.avatar}>
                  <PersonIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText primary={email} />
            </ListItem>
          ))}
        </List>
      </Box>
    </Dialog>
  );
}

SimpleDialog.propTypes = {
  onClose: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
  selectedValue: PropTypes.string.isRequired
};

export default function SimpleDialogDemo() {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState(emails[1]);

  const handleClickOpen = () => {
    setOpen(true);
  };

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

  return (
    <div>
      <Typography variant="subtitle1">Selected: {selectedValue}</Typography>
      <br />
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open simple dialog
      </Button>
      <SimpleDialog
        selectedValue={selectedValue}
        open={open}
        onClose={handleClose}
      />
    </div>
  );
}