react mackDowan 渲染文本,图片,视频

需要安装:react-markdown;remark-gfm

"react-markdown": "^9.0.1",

"remark-gfm": "^4.0.0",

TypeScript 复制代码
import { useEffect, useState } from 'react';
import ReactMarkdown, { Components } from 'react-markdown';

function checkMediaType(url: string | URL) {
  // 创建URL对象
  let link = new URL(url);

  // 获取路径部分(去除参数)
  let path = link.pathname;

  // 获取路径的最后一个点之后的内容作为文件扩展名
  
  let extension = path?.split('.')?.pop()?.toLowerCase();

  // 声明支持的图片和视频文件扩展名
  const imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
  const videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];

  // 判断文件扩展名是否在图片扩展名数组中
  if (extension && imageExtensions.includes(extension)) {
    return 'image';
  }

  // 判断文件扩展名是否在视频扩展名数组中
  if (extension && videoExtensions.includes(extension)) {
    return 'video';
  }

  // 扩展名不在图片或视频数组中,返回null表示无法确定媒体类型
  return null;
}

const components: Components = {
  a({ children, node }) {
    if (
      node &&
      typeof node.properties?.href === 'string' &&
      checkMediaType(node.properties.href)
    ) {
      return (
        <video
          style={{ width: 200, height: 200 }}
          controls
          src={node.properties.href}
        ></video>
      );
    }
    return <a {...node?.properties}>{children}</a>;
  },
};

function AIMarkdown() {
  const [content, setContent] = useState('');
  const content1 = `你好我是markDown下面会展示图片及视频:

1. 观看操作视频:[演示(1)](https://www.w3schools.com/html/mov_bbb.mp4)
2. 查看详细步骤图解:![image.png](https://gw.alipayobjects.com/zos/bmw-prod/598d14af-4f1c-497d-b579-5ac42cd4dd1f/k7bjua9c_w132_h130.png)

这些资料将指导您完成通讯录的添加人员等操作。`;
  useEffect(() => {
    let index = 0;
    const i = setInterval(() => {
      if (index < content1.length) {
        setContent((v) => {
          return v + content1[index];
        });
        index++;
      } else {
        clearInterval(i);
      }
    }, 10);
    return () => clearInterval(i);
  }, []);

  return <ReactMarkdown components={components}>{content || ''}</ReactMarkdown>;
}

export default AIMarkdown;

使用

TypeScript 复制代码
//引入文件
import AIMarkdown from './MessageAI';

.
.
.
.


<div className={style.canter}>
   <AIMarkdown />
</div>
相关推荐
明似水28 分钟前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
码银1 小时前
Java 集合:泛型、Set 集合及其实现类详解
java·开发语言
大G哥1 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
傻啦嘿哟1 小时前
HTTP代理基础:网络新手的入门指南
开发语言·php
fish_study_csdn1 小时前
pytest 技术总结
开发语言·python·pytest
BO_S__1 小时前
python调用ffmpeg对截取视频片段,可批量处理
python·ffmpeg·音视频
Simaoya1 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
亦双城的双子娴2 小时前
通过音频的pcm数据格式利用canvas绘制音频波形图
音视频·pcm·canva可画
Dnn012 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.2 小时前
《Vue3学习手记5》
前端·javascript·学习