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>
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室8 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室8 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀11 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js