【前端】解决: Property 'inline' does not exist on type 'ClassAttributes<HTMLElement> & HTMLAttribut...

简介: 【前端】解决: Property 'inline' does not exist on type 'ClassAttributes<HTMLElement> & HTMLAttribut...

一、背景

七镜在升级react-markdown v8.0.4react-markdown v9.0.1 之后,启动前端代码时,出现如下错误:

[tsl] ERROR in D:\v3_workspace_personal\blog_client_v5\src\component\markdown\i-markdown\i-markdown.tsx(71,30)
      TS2339: Property 'inline' does not exist on type 'ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps'.
ts-loader-default_e3b0c44298fc1c14
 @ ./src/app/app-example/app-example.tsx 4:0-71 24:58-67
 @ ./src/app/app.tsx 26:0-51 62:46-56
 @ ./src/index.tsx 4:0-28 6:94-97
webpack 5.89.0 compiled with 1 error in 761 ms

出现报错的部分代码如下所示:

                code:({node, inline, className, children, ...props})=> {
                    const match = /language-(\w+)/.exec(className || '')
                    return !inline && match ? (
                        <SyntaxHighlighter
                            showLineNumbers={true}
                            showInlineLineNumbers={true}
                            children={String(children).replace(/\n$/, '')}
                            // @ts-ignore
                            style={dark}
                            language={match[1]}
                            PreTag="div"
                            {...props}
                        />
                    ) : !inline && !match ? (
                        <SyntaxHighlighter
                            showLineNumbers={true}
                            children={String(children).replace(/\n$/, '')}
                            // @ts-ignore
                            style={dark}
                            language={'js'}
                            PreTag="div"
                            {...props}
                        />
                    ) : inline? (
                        <code className={"md-code-inline"} {...props}>
                            {children}
                        </code>
                    ) : (
                        <code className={className} {...props}>
                            {children}
                        </code>
                    )
                },

显而易见,新版本已经不支持传递 inline 了。

react-markdown 更新日志中也能找到这项更改:inline on code — create a plugin or use pre for the block

二、解决方案

在 pre 中增加如下代码:

            pre: ({children,node}: any) => {
                // 新增代码
                if(node.children&&node.children[0]) {
                    if(node.children[0].tagName == "code") {
                        node.children[0].properties.inline = false
                    }
                }
                // 新增代码
                return <Fragment>
                                                    <pre className="qijing-pre-element">
                                                        <CodeCopyBtn>{children}</CodeCopyBtn>
                                                        {children}
                                                    </pre>
                </Fragment>
            },

在 node 中判断如下:

            code: ({children, className, node, ...rest}) => {
                console.log("rest->",rest)
                console.log("node->",node?.properties)
                if(node?.properties.inline === false) {
                    console.log("")
                }
                // console.log(String(children).replace(/\n$/, ""))
                const match = /language-(\w+)/.exec(className || '')
                return node?.properties.inline === false ?match? (
                    <SyntaxHighlighter
                        style={dark}
                        language={match[1]}
                        PreTag="div"
                        showLineNumbers={true}
                        children={String(children).replace(/\n$/, "")}
                    />
                ) : <SyntaxHighlighter
                    showLineNumbers={true}
                    children={String(children).replace(/\n$/, '')}
                    style={dark}
                    language={'js'}
                    PreTag="div"
                />:(<code className={"md-code-inline"} >
                    {children}
                </code>)
            },


目录
相关文章
|
Web App开发 前端开发
【前端异常】Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
【前端异常】Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
744 0
|
前端开发 JavaScript
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
1350 0
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
|
6月前
|
前端开发
前端知识笔记(一)———button的type属性
前端知识笔记(一)———button的type属性
336 0
|
JavaScript 前端开发 API
前端工作总结126-vue项目报错[Vue warn]: Property “visible“ must be accessed with “$data.visible“ because proper
前端工作总结126-vue项目报错[Vue warn]: Property “visible“ must be accessed with “$data.visible“ because proper
596 0
前端工作总结126-vue项目报错[Vue warn]: Property “visible“ must be accessed with “$data.visible“ because proper
|
JavaScript 前端开发 C++
前端杂谈: Attribute VS Property
第一个问题: 什么是 attribute & 什么是 property ? attribute 是我们在 html 代码中经常看到的键值对, 例如: <input id="the-input" type="text" value="Name:" /> 上面代码中的 input 节点有三个 attr.
2571 0
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
30天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
30天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
30天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。