在 stenciljs 中绑定值为 html

Question

我无法将内部带有自定义 html 的值呈现到元素中。例如：

this.title = 'Hello <b> stencil </b>'; << response value from an API

绑定：

<h1>{this.title}</h1>

I am expecting something same as innerHtml behavior in JavaScript.

Answer 1

您可以使用

<h1 innerHTML={this.title} />

Answer 2

这在 JSX 中不是一个好的做法，它违背了虚拟 DOM 的想法并且它没有创建虚拟节点。

你应该这样试试

this.salute = 'Hello';
this.name='stencil';

绑定

<h1>{this.salute} <b>{this.name}</b></h1>

或者如果是更复杂的情况，构建另一个更小的组件。

不过使用innerHTML会起作用，但应该在不同的情况下使用更详细here(at the bottom of the page)。

Binding value as html in stenciljs