![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
获得徽章 9
赞了这篇文章
赞了这篇文章
如何增量地将 markdown 转换成 html？
现在后台是流式输出 markdown 字符串，并且每次我也不断处理全量的 markdown 字符串，再使用MarkdownContent这个组件去渲染成 html，就是这个dangerouslySetInnerHTML={{ __html: html }}去全量更新
但这样会导致一个问题，就是在流式输出的过程中，由于会不断地执行这个MarkdownView组件，导致无法使用鼠标选中渲染后的文本，因为在下次 re-render 时，这个dom已经不存在了，选中状态就又丢失了！
不过我看了下像chatgpt或者deepseek的markdown渲染，就是可以的，审查他的markdown，应该是增量更新的
我后面研究了下，自己写了个markdown的parser，但我觉得通过重新写一个parser去实现这个需求，工作量太大，有什么成熟的方案吗
github:
github.com
live demo:linzhe141.github.io
现在后台是流式输出 markdown 字符串，并且每次我也不断处理全量的 markdown 字符串，再使用MarkdownContent这个组件去渲染成 html，就是这个dangerouslySetInnerHTML={{ __html: html }}去全量更新
但这样会导致一个问题，就是在流式输出的过程中，由于会不断地执行这个MarkdownView组件，导致无法使用鼠标选中渲染后的文本，因为在下次 re-render 时，这个dom已经不存在了，选中状态就又丢失了！
不过我看了下像chatgpt或者deepseek的markdown渲染，就是可以的，审查他的markdown，应该是增量更新的
我后面研究了下，自己写了个markdown的parser，但我觉得通过重新写一个parser去实现这个需求，工作量太大，有什么成熟的方案吗
github:
github.comlive demo:
linzhe141.github.io
展开
评论
点赞
赞了这篇文章
赞了这篇文章
react新手对于react input onChange 的疑惑，为什么input的onChange不支持异步，我没有在文档找到相关描述
```jsx
function App() {
const [input, setInput] = useState('')
const [input1, setInput1] = useState('')
return (
<div>
<input
value={input}
onClick={async (e) => {
await new Promise((resolve) => setTimeout(resolve, 100))
setInput('e.target.value')
}}
></input>
<input
value={input1}
onChange={async (e) => {
await new Promise((resolve) => setTimeout(resolve, 100))
setInput1(e.target.value)
}}
></input>
</div>
)
}```
codepen.io
```jsx
function App() {
const [input, setInput] = useState('')
const [input1, setInput1] = useState('')
return (
<div>
<input
value={input}
onClick={async (e) => {
await new Promise((resolve) => setTimeout(resolve, 100))
setInput('e.target.value')
}}
></input>
<input
value={input1}
onChange={async (e) => {
await new Promise((resolve) => setTimeout(resolve, 100))
setInput1(e.target.value)
}}
></input>
</div>
)
}```
codepen.io
展开
评论
点赞
赞了这篇文章