在stenciljs中將值綁定為html

Question

我無法將自定義html內部的值渲染到元素中。 例如：

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

捆綁：

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

我期待與JavaScript中的innerHtml行為相同的東西。

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會起作用，但是應該在不同情況下使用更多細節（在頁面底部） 。