使用solid-js/html时HTML字符串无法渲染，遇Unexpected token '.'错误

问题描述 #

在SolidJS项目开发中，通过ansi-to-html工具将Shell输出转换为HTML字符串（例如<b>spicetify v2.15.0</b>），传入html模板字面量后，页面未渲染出对应的HTML元素，反而直接输出带标签的原始字符串，同时控制台抛出Uncaught Error: Unexpected token '.'错误。

相关代码：

import Titlebar from "./components/Titlebar/Titlebar"
import "./Utils/Utils"
import { createSignal } from "solid-js"
import Convert from "ansi-to-html"
import html from "solid-js/html"

var convert = new Convert()

let shellOutput = []
const [currentShellOutput, setCurrentShellOutput] = createSignal(shellOutput)
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (args) => {
    args = convert.toHtml(args)
    setCurrentShellOutput((value) => {
        console.log(args) // args is a string eg: "<b>spicetify v2.15.0</b>"
        return value.concat([args])
    })
})

export default function App() {
    return (
        <>
            <Titlebar></Titlebar>
            {currentShellOutput().map((output) => html`${output}`)}
        </>
    )
}

页面输出效果：

解决方法 #

1. 纠正solid-js/html的使用认知 #

html模板字面量的作用是编译SolidJS的类JSX语法，并非直接渲染原始HTML字符串。直接传入HTML字符串会被当作普通文本转义输出，这就是标签未解析的核心原因。

2. 使用dangerouslySetInnerHTML渲染原始HTML #

SolidJS提供dangerouslySetInnerHTML属性专门用于插入原始HTML内容，这是唯一能直接解析HTML字符串的方式。修改渲染部分代码：

{currentShellOutput().map((output) => (
  <div dangerouslySetInnerHTML={{ __html: output }} />
))}

3. 解决Unexpected token '.'错误 #

该错误是由于html模板字面量无法解析纯HTML字符串导致的，改用dangerouslySetInnerHTML后，模板解析逻辑不再触发，错误会自动消失。

4. 优化信号更新逻辑（可选） #

可以用数组展开语法简化信号更新代码：

setCurrentShellOutput(prev => [...prev, args])

完整修改后的代码 #

import Titlebar from "./components/Titlebar/Titlebar"
import "./Utils/Utils"
import { createSignal } from "solid-js"
import Convert from "ansi-to-html"

const convert = new Convert()

const [currentShellOutput, setCurrentShellOutput] = createSignal([])
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (args) => {
    const htmlStr = convert.toHtml(args)
    setCurrentShellOutput(prev => [...prev, htmlStr])
})

export default function App() {
    return (
        <>
            <Titlebar />
            {currentShellOutput().map((output) => (
                <div dangerouslySetInnerHTML={{ __html: output }} />
            ))}
        </>
    )
}

内容的提问来源于stack exchange，提问作者Raghavan Vidhyasagar