一、背景
七镜在升级react-markdown v8.0.4 到 react-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>) },
