来自变量的 Svelte 渲染标记答案

【问题标题】：Svelte render markup from variable来自变量的 Svelte 渲染标记
【发布时间】：2022-01-01 13:51:52
【问题描述】：

我要解决的问题：

我想要一个带有导出的文件，info.js，它是包括标记或纯字符串在内的变量。

例如；

export const title = "Some title"
export const mainText = (<b> I'm so texty </b>, mark me up like I'm a hot reloadable)

在 JSX 世界中，mainText 很好，在 Svelte 世界中，mainText 需要是一个字符串，然后我使用 @html thingy {@html mainText} 加载。

有我想输入的问题的半解决方案：

虽然，当我使用@html 加载时，.svelte 文件中的样式并未应用。好吧，我可以用 :global 做到这一点，但是...我的第二个问题是字符串中的标记也很烦人 - 无法美化它。

我该怎么办？

【问题讨论】：

理想情况下，HTML 不应该存储在字符串中，但在现实世界中这些东西是存在的。我认为:global 样式的手动方法是一种不错的方法。也许考虑使用 MDSvex mdsvex.com ？

【解决方案1】：

为类似html的语法创建一个单独的文件，字符串中的标记不会很漂亮，不需要做太多。您可以从后端加载和解析 .html 之类的，但这也不是最好的。

样式应该是全局的，因为它不打算以这种方式工作（开箱即用），但是您可以在静态文件夹中拥有单独的样式文件，或者从后端发送单独的 html和独立页面。

通常，我建议重构所有内容，以便您可以使用 Svelte，因为它应该被使用。

【讨论】：