如何在react-markdown-preview中流式传输文本？

Question

我正在使用

@uiw/react-markdown-preview

将文本渲染为富文本并按预期工作。我需要像流媒体一样渲染文本，任何人都可以帮忙吗？

import MarkdownPreview from '@uiw/react-markdown-preview'; 

const text = "Here's a JavaScript function that generates the Fibonacci sequence up to a given number:\n\n```javascript\nfunction fibonacci(n) {\n  let first = 0;\n  let second = 1;\n\n  console.log(first);\n  console.log(second);\n\n  for (let i = 2; i < n; i++) {\n    let next = first + second;\n    console.log(next);\n    [first, second] = [second, next];\n  }\n}\n\nfibonacci(10);\n```\n\nThis code will print the Fibonacci sequence up to the 10th number:\n\n0\n1\n1\n2\n3\n5\n8\n13\n21\n34\n\nIf you run this code in a JavaScript environment (like Node.js or a web browser console), it should display these numbers as output."

<MarkdownPreview
   className="mark-down-box"
   source={text}
   wrapperElement={{ "data-color-mode": "dark" }}
/>

我需要像流式传输一样渲染这些输出。意思是逐个字符地显示输出。有什么想法吗？

Answer 1

要触发重新渲染，您需要将其设置为状态对象。

类似：

const MyComponent = ({value}) => {
   const [content, setContent] = useState("")
   useEffect(() => {
       setContent(value)
   }, [value])
   
   return (
    <MarkdownPreview
   className="mark-down-box"
   source={value}
   wrapperElement={{ "data-color-mode": "dark" }}
    />
    )
}