336 | {paragraphs.map((paragraph, index) => {
337 | if (paragraph.type === 'br') {
338 | return null;
339 | }
340 | return {paragraph.content || ''};
341 | })}
342 | {currentParagraph?.answerType === answerType && {currentParagraph.content || ''}}
343 |
344 | );
345 | };
346 |
347 | return (
348 |
354 | {(thinkingParagraphs.length > 0 || currentParagraph?.answerType === 'thinking') &&
{getParagraphs(thinkingParagraphs, 'thinking')}
}
355 | {(answerParagraphs.length > 0 || currentParagraph?.answerType === 'answer') &&
{getParagraphs(answerParagraphs, 'answer')}
}
356 |
22 |
23 | ## props
24 |
25 | ### 默认导出
26 |
27 | | 属性名 | 类型 | 说明 | 默认值 |
28 | | ------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- |
29 | | `interval` | `number` | 打字的速度`ms` | `30` |
30 | | `answerType` | `thinking` \| `answer` | `markdown`类型 | `answer` |
31 | | `onEnd` | `(data: { str: string; answerType: AnswerType }) => void` | 打字结束后回调，**可能会触发多次，因为AI的响应可能是一段一段，间隔可能较久** | - |
32 | | `onStart` | `(data: { currentIndex: number; currentChar: string; answerType: AnswerType; prevStr: string }) => void` | 打字开始回调 **可能会触发多次** | - |
33 | | `onTypedChar` | `(data: { currentIndex: number; currentChar: string; answerType: AnswerType; prevStr: string }) => void` | 当前正在打字的回调 | - |
34 |
35 | ## 使用示例 - default export
36 |
37 | [在线查看](https://stackblitz.com/edit/vitejs-vite-ddfw8avb?file=src%2FApp.tsx)
38 |
39 | ```tsx
40 | import { useState } from 'react';
41 | import DsMarkdown from 'ds-markdown';
42 | import 'ds-markdown/style.css';
43 |
44 | const markdown = `# ds-markdown
45 |
46 | \`ds-markdown\`是一个[React](https://react.dev)组件, 类似[deepseek官网](https://chat.deepseek.com/)风格的 \`Markdown\`
47 |
48 | ## 特性
49 |
50 | - 🦮 对`deepseek`官网的聊天响应效果进行了1:1还原
51 | - 🛠 自带打字效果
52 | - 🦮 内部封装了常用的\`markdown\`格式的文本显示
53 | - 🔤 对大文档进行了性能优化，进行分批处理，生成打字效果的时候不会对页面造成卡顿现象
54 | `;
55 |
56 | function App() {
57 | const [thinkingContent, setThinkingContent] = useState('');
58 | const [answerContent, setAnswerContent] = useState('');
59 |
60 | const onClick = () => {
61 | // 如果重复点击，则会清空之前的效果
62 | setThinkingContent('这是我思考的内容，我已经思考完成，下面是我的答案');
63 | };
64 |
65 | console.log(answerContent);
66 | return (
67 |