我有一個基于 lit 元素的 javascript 專案，當我想在文本中拋出一個帶有 .replace 的 html 標簽時，我遇到了帶有標簽的值或物件、物件形式的結構，我制作了如下結構，我究竟做錯了什么？基本上我的價值觀
main-text = abc dcf [0] xyz
bold-text = 123
和我在這里的渲染
render() { return html`
<section >
<div class="blablaclass" @click = ${() => this.clickfnc()} >
<div class="blablaclass1">
${html`<span> ${this.t('main-text').replace('[0]', this.renderCardText )} </span>`}
</div>
<div>
<img class="blablaclass2" src="./resources/right-arrow.svg"/>
</div>
</div>
</section>`;
}
get renderCardText(){
return html`<strong>this.t('bold-text')</strong>`;
}
和輸出
output: acv dcf [] xyz
without call html in function just return output: acv dcf <strong>123</strong> xyz
uj5u.com熱心網友回復：
htmltag 函式回傳一個物件，TemplateResult因此您不能將其用作String.prototype.replace().
您想要做的事情有幾個不同的選擇：
- 拆分字串而不是替換并逐個組合它們。
render() {
const [before, after] = this.t('main-text').split('[0]');
return html`
<section >
<div class="blablaclass" @click = ${() => this.clickfnc()} >
<div class="blablaclass1">
${html`<span>${before}${html`<strong>${this.t('bold-text')}</strong>`}${after}</span>`}
</div>
<div>
<img class="blablaclass2" src="./resources/right-arrow.svg"/>
</div>
</div>
</section>`;
}
如果您要替換的東西超過 1 個，這可能會變得很棘手。
- 替換為字串并使用
unsafeHTML指令。
render() {
return html`
<section >
<div class="blablaclass" @click = ${() => this.clickfnc()} >
<div class="blablaclass1">
${html`<span>${unsafeHTML(this.t('main-text').replace('[0]', `<strong>${this.t('bold-text')}</strong>`))}</span>`}
</div>
<div>
<img class="blablaclass2" src="./resources/right-arrow.svg"/>
</div>
</div>
</section>`;
}
確保你信任你放在那里的字串。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/510262.html