使用React Hook渲染AdaptiveCard报错：TypeError: this.getSchema is not a function

你的卡片渲染方式不正确，adaptiveCards.AdaptiveCard不能直接传入JSON Schema来渲染，核心原因是未正确初始化AdaptiveCard的序列化环境，不符合其API调用规范。

正确的手动渲染方式需要按以下步骤操作：

• 从useAdaptiveCardsPackage返回值中提取AdaptiveCard类与cardSchema
• 初始化序列化器并注册卡片Schema
• 创建AdaptiveCard实例，通过parse方法加载JSON数据后再渲染

示例代码：

import React, { useEffect, useRef } from 'react';
import { useAdaptiveCardsPackage } from 'botframework-webchat';

function CustomAdaptiveCard({ cardData }) {
  const [adaptiveCards] = useAdaptiveCardsPackage();
  const cardContainer = useRef(null);

  useEffect(() => {
    if (!adaptiveCards || !cardData || !cardContainer.current) return;

    const { AdaptiveCard, cardSchema, Serializer } = adaptiveCards;
    // 初始化序列化器并注册卡片Schema
    const serializer = new Serializer();
    serializer.addSchema(cardSchema);

    // 创建卡片实例并加载数据
    const cardInstance = new AdaptiveCard();
    cardInstance.parse(cardData, serializer);

    // 渲染到DOM容器
    cardContainer.current.innerHTML = '';
    cardContainer.current.appendChild(cardInstance.render());
  }, [adaptiveCards, cardData]);

  return <div ref={cardContainer} />;
}

更简便的方式是直接使用WebChat封装好的AdaptiveCard组件，无需手动调用useAdaptiveCardsPackage：

import { AdaptiveCard } from 'botframework-webchat';

function SimpleAdaptiveCard() {
  return <AdaptiveCard payload={myJsonCardSchema} />;
}

内容的提问来源于stack exchange，提问作者user4038732