Javascript 如何在材质ui组件上设置HTML元素ID？

我有一个网站是用Gatsby.js构建的

具体的问题是：我想使用Google标记管理器的“元素可见性”触发器。如果某个HTML元素变得可见，GTM应该触发一些GA标记

问题是：如何为GTM（或其他任何东西）找到的材质ui组件指定HTML ID

第一个例子：

//…反应导入省略。。。
从“@material ui/core/styles/makeStyles”导入makeStyles；
从“@material ui/core/Box”导入框；
从“@material ui/core/Grid”导入网格；
从“@material ui/icons/Close”导入CloseIcon；
从“~components/Link”导入链接；
从“~components/form buttons/ButtonsSubmit”导入按钮提交；
从“~组件/容器”导入容器；
// ... 所有其他进口均为内部代码
constUseStyles=makeStyles（主题=>（{/*…样式…*/}））；
const GuestUserSoftSaleSecondPopup=（{which，…rest}）=>{
const classes=useStyles（）；
//…忽略了设置代码。。。
返回(
成为完全访问权限的成员
看我的选择
);
};
//…proptypes和“export”子句

第二个例子：

//…反应导入省略。。。
从“@material ui/core/styles/makeStyles”导入makeStyles；
从“@material ui/core/Dialog”导入MuiDialog；
const useStyles=makeStyles（（）=>（{/*…styles…*/}））；
const Dialog=（{子对象、背景、背景、等参对象、…rest}）=>{
const classes=useStyles（{background}）；
返回(
{儿童}
);
};

材质UI组件不允许您为它们设置id，因为其中的实现应该是一个黑盒，并且可能包含多个html元素。看看是否可以将元素包装在div中，并将id放在上面

---

另一种选择是（通过

classes

prop）向元素中添加一个类，但我不确定Google Tag Manager是否可以使用这些类来代替ID。

如果您查看API文档中几乎所有材质UI组件，您将在“Props”的末尾找到节中的语句，如以下示例所示：

提供的任何其他道具将提供给根元素（模态）

这意味着该组件未明确识别的任何道具最终将传递给呈现的最外面的HTML元素。因此，对于大多数材质UI组件，为了添加

id

属性，只需指定它即可

下面的示例（对的修改）包括三个不同的ID：一个位于

对话框

元素上，该元素将位于

模式

的最外层

div

，一个通过

PaperProps

指定，该ID将位于对话框可见内容的主

纸张

div上，还有一个在

框中

环绕对话框内容

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>
  );
}

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemAvatar”导入ListItemAvatar；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/icons/Person”导入PersonIcon；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/colors”导入{blue}”；
从“@material ui/core/Box”导入框；
常量电子邮件=[”username@gmail.com", "user02@gmail.com"];
const useStyles=makeStyles({
化身：{
背景颜色：蓝色[100]，
颜色：蓝色[600]
}
});
函数SimpleDialog（道具）{
const classes=useStyles（）；
const{onClose，selectedValue，open}=props；
常量handleClose=（）=>{
onClose（selectedValue）；
};
const handleListItemClick=值=>{
onClose（值）；
};
返回(
设置备份帐户
{emails.map（email=>(
handleListItemClick（电子邮件）}
key={email}
>
哦！带ID的包装器div是个主意！虽然粗糙，但可能会起作用。
类
恐怕不会起作用，因为构建工具链会自动引用所有类，使它们对于页面上的所有组件都是唯一的，所以我无法预测HTML中的最终名称。@hijarian不确定，但前缀可能只是用于css内容。我有一种感觉，类的东西可能仍然有效。如果包装器div对你来说太粗糙，可能值得一试。不能100%确定顺便说一句，我可以添加一个标记元素，而不是添加一个包装器，只是一个空的
div
，ID在组件中的任何地方。我实际上并不关心弹出窗口是否有ID，我想要som带有该ID的元素将与弹出窗口一起出现在页面上…一些组件（例如可以具有用户定义的
ID
）请显示您要添加ID的元素的代码。在不知道您正在使用哪个组件的情况下，很难提供帮助。@RyanCogswell添加了两个自定义组件的示例，我希望可以通过ID查找它们。我相信许多组件都有一个
组件
道具，您可以在其中传递自定义组件（如）因此，您可能可以传入一个自定义组件，它只是一个
div
，具有您想要的
id
。@BlunderingPhysior确实这正是我目前正在尝试的解决方案。来自Shimmy568的回答让我想到了这个想法。