如何在Bot Framework React组件中通过Middleware实现renderMarkdown？

嘿，我帮你把这个Markdown渲染功能迁移到React组件里，同时也会告诉你怎么用Middleware来实现对应的需求～

一、基础React组件实现（和你HTML版本逻辑完全对齐） #

首先，你需要在React项目里安装必要的依赖：

npm install botframework-webchat markdown-it
# 或者用yarn
yarn add botframework-webchat markdown-it

然后创建你的WebChat组件，直接通过renderMarkdown属性传入渲染函数，逻辑和你原来的HTML写法完全一致，只是换成React组件形式：

import React from 'react';
import ReactWebChat from 'botframework-webchat';
import markdownIt from 'markdown-it';

// 初始化markdown-it实例，配置和你原来的保持一致
const mdInstance = markdownIt({
  html: true,
  linkify: true,
  typographer: true
});

// 定义Markdown渲染函数
const renderMarkdown = (text) => mdInstance.render(text);

const WebChat = () => {
  // 创建DirectLine连接
  const directLine = ReactWebChat.createDirectLine({
    token: 'VeY8HxuBVIw.fKAVwOjeVn9tcx7fhZ0cSCBz5vM8tp8G0JcNT3BGiRI'
  });

  return (
    <div style={{ height: '100vh', width: '100%', margin: 0 }}>
      <ReactWebChat
        directLine={directLine}
        userID="Arun"
        username="Arun"
        locale="en-US"
        botAvatarInitials="WC"
        userAvatarInitials="WW"
        // 直接传入renderMarkdown属性，和HTML版本的配置完全对应
        renderMarkdown={renderMarkdown}
      />
    </div>
  );
};

export default WebChat;

这种方式是WebChat官方推荐的直接配置Markdown渲染的方式，和你原来的HTML实现逻辑完全匹配，上手最快。

二、用Middleware实现Markdown渲染（满足你的需求） #

如果你想通过Middleware来处理Markdown转换，Middleware可以让你在消息活动流转的过程中拦截并修改内容，灵活性更高（比如可以同时处理Bot和用户的消息，或者修改活动的其他属性）。

步骤1：创建Markdown处理Middleware #

import markdownIt from 'markdown-it';

const mdInstance = markdownIt({
  html: true,
  linkify: true,
  typographer: true
});

// 定义Middleware
const markdownProcessingMiddleware = () => next => action => {
  // 只处理消息类型的活动
  if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.type === 'message') {
    const activity = action.payload.activity;
    
    // 把Bot发送的Markdown文本转换成HTML
    activity.text = mdInstance.render(activity.text);
    
    // 如果消息有附件（比如富文本附件），也可以处理里面的文本
    if (activity.attachments) {
      activity.attachments.forEach(attachment => {
        if (attachment.content?.text) {
          attachment.content.text = mdInstance.render(attachment.content.text);
        }
      });
    }
  }

  // 把处理后的活动继续传递下去
  return next(action);
};

步骤2：在WebChat组件中使用Middleware #

把创建好的Middleware传入WebChat的middleware属性（注意是数组形式，支持同时配置多个Middleware）：

import React from 'react';
import ReactWebChat from 'botframework-webchat';
import { markdownProcessingMiddleware } from './your-middleware-file';

const WebChat = () => {
  const directLine = ReactWebChat.createDirectLine({
    token: 'VeY8HxuBVIw.fKAVwOjeVn9tcx7fhZ0cSCBz5vM8tp8G0JcNT3BGiRI'
  });

  return (
    <div style={{ height: '100vh', width: '100%', margin: 0 }}>
      <ReactWebChat
        directLine={directLine}
        userID="Arun"
        username="Arun"
        locale="en-US"
        botAvatarInitials="WC"
        userAvatarInitials="WW"
        // 传入Middleware数组
        middleware={[markdownProcessingMiddleware]}
      />
    </div>
  );
};

export default WebChat;

两种方式的区别 #

• 直接传renderMarkdown属性：逻辑简单，和你原来的HTML实现完全对齐，是WebChat官方内置的专门用来渲染消息内容的方式，适合只需要渲染消息Markdown的场景。
• 使用Middleware：灵活性更高，能在活动到达渲染层之前修改内容，适合需要对消息做更多自定义处理的场景（比如同时处理用户发送的消息、修改活动的其他属性等）。

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