Question

我在材料中有一张简单的卡片：ui：

 <Card>
    <CardHeader
      title={this.props.series.name} />
  </Card>

我想让标题成为我通过属性传递的URL的链接。我查看了JSX源头的卡头，但我无法弄清楚如何实现这一点。

Answer 1

 <CardHeader
    avatar={
      <Avatar aria-label={placeData.type} className={classes.avatar}>
        <PlaceTypeIcon type={placeData.type} />
      </Avatar>
    }
    action={
      <IconButton href={gMapUrl} aria-label="maps">
        <MapOutlinedIcon />
      </IconButton>
    }
    title={placeData.title}
    subheader={placeData.street}
  />

将其放入动作道具也可以正常工作

Answer 2

似乎没有规定从sourcecode将标题设为<a>。

但是你可以用一些黑客来搞定事情

将<a href=''>作为值传递给该道具
听取点击事件并触发转换以更改路线。

Answer 3

最简单的方法是将a标记放在CardHeader的title属性内：

<CardHeader
    action={
        <IconButton>
            <MoreVertIcon />
        </IconButton>
    }
    title={
        <Link to={url}>{props.name}</Link> //similarly use `a` if not using react-router
    }
    // For making an avatar link
    avatar={
        <Avatar component={Link} to={url} aria-label={props.name} className={classes.avatar}>
            A
        </Avatar>
            }
    subheader={props.subheader}
/>

Answer 4

这对我有用，我只是在CardHeader subheader内放了一个材料UI链接。

<CardHeader
        avatar={
          <Avatar aria-label={placeData.type} className={classes.avatar}>
            <PlaceTypeIcon type={placeData.type} />
          </Avatar>
        }
        title={placeData.title}
        subheader={
          <Link className={classes.link} href={gMapUrl}>
            {placeData.street}
          </Link>
        }
      />

Answer 5

如果将其设为<a href={} />不起作用，我相信它会：

    <Card>
      <CardHeader title={this.props.series.name} onClick={this.props.series.link} style={linkStyle}/>
    </Card>

并指定一个自定义linkStyle，使<CardHeader/>看起来像一个链接。

Answer 6

这对我有用。

  <CardTitle title={renderHTML('<a href="YOUR-LINK">TITLE</a>' )}/>

您也可以使用相同的字幕方法。

如何为material-ui卡片标题指定锚点？

6 个答案: