将原始 HTML 插入 Elm 组件

Question

如何将我知道是 'safe' 的文本直接插入 Elm 页面。

即下面的text'是什么

let str = "<h1>Hello World</h1>"
in div [] [ text' str ]

实际上我可以获得任何有效的 HTML，所以我不想构建解析器，我宁愿避免使用端口，因为 DOM 可以破坏虚拟 dom 差异化

Answer 1

本文 post 中讨论了一些解决方案。发帖人似乎成功地使用了 Markdown.toHtml.

Answer 2

详细说明，这对我有用：

安装降价库

elm-package install evancz/elm-markdown

在 div

中呈现您的 HTML

import Markdown

div [] [ Markdown.toHtml [] str ]

Answer 3

或者只是这个 as per:

import Html exposing (div)
import Html.Attributes exposing (property)
import Json.Encode exposing (string)

main = 
  div [ property  "innerHTML" <| string "<div>hello</div>"  ] []

Answer 4

从 Elm 0.19 开始，elm-markdown 中的漏洞似乎已被堵塞并正确转义 HTML。

适用于 Elm 0.19 的解决方案是使用 hecrj/html-parser:

解析 HTML

import Html.Parser
import Html.Parser.Util

let
    rawHtml = "<h1>Hello World</h1>"
    innerHtml = case Html.Parser.run rawHtml of
        Ok nodes -> Html.Parser.Util.toVirtualDom nodes
        Err _    -> []
in
    div [] innerHtml

将原始 HTML 插入 Elm 组件

Insert raw HTML into Elm component

elm