Javascript 如何使盖茨比链接接收道具作为参数并关闭单击光标

我有一个组件包装器来剪切我的应用程序上的一些重复代码。 这个包装有一些道具，所以我可以选择是打印带有图标的文本，还是打印指向其他页面的链接的图标。 我的目标是渲染带有图标的文本，图标不能作为链接单击，但如果我只渲染图标，图标可以作为链接单击

行列表组件：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import PeopleIcon from "@material-ui/icons/People";
import { Link } from "gatsby";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Button from "@material-ui/core/Button";

export default function RowListComponent(props) {
  const style = styles();

  return (
    <List className={style.listSize}>
      <ListItem className={style.listSize}>
        <Link to={`/${props.component}/${props.link}`}>
          <ListItemIcon>{props.icon}</ListItemIcon>
        </Link>
        <ListItemText>{props.name}</ListItemText>
      </ListItem>
    </List>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/icons/People”导入人物图标；
从“盖茨比”进口{Link}；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@物料界面/核心/按钮”导入按钮；
导出默认函数RowListComponent（道具）{
常量样式=样式（）；
返回(
{props.icon}
{props.name}
);
}

我想在另一个组件上使用此组件包装器，使用方式如下：

return (
  <div>
    <MaterialTable
      icons={tableIcons}
      title={<h1 className={style.title}>Users</h1>}
      columns={[
        {
          title: "Name",
          field: "name",
          render: rowData => (
            <RowListComponent
              icon={<PeopleIcon className={style.iconColor} />}
              name={rowData.name}
            />
          )
        },
        {
          title: "Details",
          field: "details",
          render: rowData => (
            <RowListComponent
              icon={<ListAltIcon className={style.iconColor} />}
              component={"users"}
              link={rowData.details}
            />
          )
        }
      ]}
      data={state.users}
      options={{
        search: true
      }}
    />
  </div>
);

返回(
(
)
},
{
标题：“详情”，
字段：“详细信息”，
渲染：rowData=>(
)
}
]}
数据={state.users}
选择权={{
搜索：正确
}}
/>
);

我的问题是，我想用道具激活或不激活链接，因此当你将鼠标移到链接上时，光标不会改变

更新：

我提出了一个解决方案，但这不是我想要的，但它是有效的

export default function RowListComponent(props) {
  const style = styles();
  return (
    <List className={style.listSize}>
      <ListItem className={style.listSize}>
        <Link
          to={`/${props.component}/${props.link}`}
          className={props.isActive}
        >
          <ListItemIcon>{props.icon}</ListItemIcon>
        </Link>
        <ListItemText>{props.name}</ListItemText>
      </ListItem>
    </List>
  );
}

导出默认函数RowListComponent（props）{
常量样式=样式（）；
返回(
{props.icon}
{props.name}
);
}

---

我设置了isActive属性：

isActive={style.disabledLink}

这个样式是

pointerEvents:“无”

，但我真正想要的只是说

isActive={true或false}

我想你想要这样的东西：

现在，您可以将css添加到将“pointerEvents”设置为none的“is active”类中。您可以将布尔值传递给“isActive”

我还看到了加入条件类名的好包。那么这就是解决方案：

或者，如果要直接添加不带类名的样式：