用React来显示自适应卡片

适应性卡片是处理以JSON格式的卡片状UI内容的规范。虽然它是一个较为次要的格式，但由于被Microsoft Teams的WebHook所采用，所以可能有一些人对其有所了解。

Adaptive Cards由Microsoft领导，但是是一个开放规范，并在各种平台上提供了库。在本文中，我们将介绍适用于React的端口，即adaptivecards-react。

示例页面

我已经准备了一个使用adaptivecards-react的示例项目（React + TypeScript + Vite + SWC）。3

• デモページ

レポジトリ

如果您仔细观察，可以发现adaptivecards-react只负责在React上输出元素，而不是应用Fluent UI设计。Adaptive Cards期望在目标应用程序中转换为适应周围环境的UI，所以只需根据React项目的样式进行调整即可。

适用于 adaptivecards-react 的方式

使用方法非常简单，只需将 Adaptive Cards 的 JSON 设置为 payload 属性，将字体等配置设置为 hostConfig 属性。

<AdaptiveCard payload={card} hostConfig={hostConfig} />

注意事项是，在 v1.1.1 版本中，peerDependencies 被设定为 “react”: “^17.0.2″，无法成功将其引入 React 18 项目中。我写这篇文章的动机是「Adaptive Cards 看起来像是一个开放的规范，但是它在哪里还被使用了呢？哦，对了，React 也可以用！让我们试试看」。如果正式发布的 React 18 无法兼容了，实际的项目中应该考虑是否采用。另外，主流的 adaptivecards 似乎在持续维护中，如果想要使用 Adaptive Cards，请使用这个版本。

请提供相关链接

• Adaptive Cards

• パートナー

• Schema Explorer

• adaptivecards-react

• npm v7でERESOLVE unable to resolve dependency tree Could not resolve dependency:

他人の Outlook に Adaprive Cards （Actionable Email）を送信する方法