reactjs - Ant 设计卡片。向 Meta 添加更多信息

Question

import { Card } from 'antd';
const { Meta } = Card;

ReactDOM.render(
  <Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta
      title="Europe Street beat"
      description="www.instagram.com"
    />
  </Card>
, mountNode);

在 AntDesign 的示例中，在 Card 的元部分中，有没有一种方法可以向卡片添加更多描述，如“价格”或“作者”并显示它？

Answer 1

不幸的是，Meta 仅支持固定属性，如 title 和 description。 https://ant.design/components/card/#Card.Meta

但是如果你想向卡片添加额外的字段，你可以将它们添加到 Card html 中作为子项:

<Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta
      title="Europe Street beat"
      description="www.instagram.com"
    />
    <div className="additional">
      <p className="price">Price: 20$</p>
      <p>Author: John Doe</p>
    </div>
  </Card>

参见 Codepen Demo .