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

Question

我在material-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

最简单的方法是在aCardHeader 的 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 3

这对我有用，我只是在CardHeader subheader.

<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 4

似乎没有规定<a>从sourcecode制作标题。

但是您可以使用一些技巧来使事情正常进行

1. 作为值传递<a href=''>给该道具

2. 监听点击事件并触发 transitionTo 来改变路由。

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>' )}/>

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