Блог

В настоящее время я работаю над портфолио react и хотел изучить дизайн ant, один из последних шагов, которые мне в настоящее время нужно сделать, — это сделать действия интерактивными событиями/ссылкой, которые переходят на github. Я везде искал и не могу этого понять.

Это текущая модель

 // input projects into cards
import React from 'react';


import { Card, Avatar, Tag} from 'antd';
import {GithubOutlined,LinkOutlined} from '@ant-design/icons';


const { Meta } = Card;



export function ProjectList() {
  
  return (
      <Card
        style={{ width: 300 }}
        cover={
          <img
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
        }
        actions={[
          <GithubOutlined key="github" type="link">
            <Tag>
              <a href="https://ant.design/components/card/">

              </a>
              
            </Tag>
          </GithubOutlined>,
          <LinkOutlined key="link" href=""/>
        ]}
      >
        <Meta
          avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
          title="Card title"
          description="This is the description"
        />
      </Card>
  )
};
 

Вы можете сделать одну вещь, добавив div за пределы карты с onClick :

 <div onClick={() => alert("Hello from here")}>
    <Card></Card>
</div>
 

Понял это, так как он переходит по внешней ссылке, а значки уже являются кликабельными событиями, вы просто окружаете значок <a> тегом, и это работает.

 <a href="">
    <LinkOutlined key="link" href=""/>
</a>