Reactjs 蚂蚁设计卡。向元数据添加更多信息 从“antd”导入{Card}； const{Meta}=卡片； ReactDOM.render( ，mountNode）；

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

不幸的是，

Meta

只支持固定属性，如

标题
和
描述

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

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);


价格：20$
作者：John Doe


请参阅。
可以这样做

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

const{Card}=antd；
const{Meta}=卡片；
ReactDOM.render(
价格：20$
作者：John Doe

，mountNode）；
Meta仅支持固定属性，如标题和说明。但是，如果您想为您的卡添加更多详细信息，您可以借助
说明
道具，该道具支持
Meta

您只需要像在JSX中那样编写代码

const { Card } = 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={[
         <div>
             <p>"www.instagram.com"</p>
             <p> additional content</p>
          </div>
        ]}
      />
   <div className="additional">
     <p className="price">Price: <span className="quantity">20$</span></p>
     <p>Author: <span className="quantity">John Doe</span></p>
   </div>
   </Card>
  , mountNode);

为什么不这样做；description={第一个内容
第二个内容
}
<Card hoverable style={{ width: 300, marginTop: 16 }}>
        <Meta
          description={                   //Add your specific data here in description
            <>
              <div className="subject-card_extra-content">
               <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{width:20}}/>
               <span>Data</span>
              </div>

              <div className="dashboard-subject_inline-actions">
                <Icon type="video-camera" />
                <p>
                  Total Videos :<span> {5} </span>
                </p>
              </div>

              <Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
                Continue Learning
              </Button>

              <Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
                No Progress
              </Button>
            </>
          }
        />
      
    </Card>