html string added in template form treated as string, not html
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 42/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- javascript
- Ambito
- frontend
Direzione di ricerca
Riproduci l'esempio Carousel fornito usando l'entry point di tagged template html, concentrandoti sulla differenza tra markup letterale e valori interpolati come ${mainImage} e ${minis}. Determina la semantica di interpolazione prevista e aggiungi la copertura per il risultato VDOM atteso; il lavoro è completo quando le stringhe HTML interpolate vengono renderizzate come markup senza richiedere un elemento creato separatamente.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
function Carousel(props) {
let images = props.images.split(",");
images.map(image => image.trim());
let mainImage = `<img src="${images[0]}"></img>`;
let minis = "";
images.forEach(imageUrl => {
minis = minis.concat(`<img class="mini" src="${imageUrl}"></img>`)
})
console.log('a',images,minis)
console.log(html`
<div class="carousel">
<div class="main">
<img src="${images[0]}"></img>
${mainImage}
<p class="description">
Tro rilata fundamenta tabelvorto ik, o pre frazo iometo interalie. Dum otek iliard malsupera il, pro gh neigi gentonomo. Aliam multe poste ke bio, bo aha jeso samideano. Usono laŭlonge si kuo, ju apud anstataŭ ligvokalo ial, ikso tempo ut nur. Mo alta numeralo eks, timi pebi frazetvortigo no nen. Anti neniu tuj so, kapabl respondeci prepozitivo op fri.
</p>
</div>
<div class="minis">
${minis}
</div>
</div>
`)
}
specifically, notice these children:
<img src="${images[0]}"></img>
${mainImage}
Even though they're identical input, one is converted to a string child, one is converted to a vdom object.
This is pretty annoying. For something this small, I don't want to create a preact element. I find it weird that this option isn't available. Am I missing something? Why does htm not allow this to be parsed as html but insist on keeping it as a string?
- Lingua principale
- JavaScript
- Stelle
- 9k
- Fork
- 181
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di developit/htm
-
Sarthak Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 1/100
-
Tugas Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 10/100
-
Tugas Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 1/100
-
type checking templates Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 20/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 35/100
Tutte le issue di developit/htm
Issue simili
-
awaiting triage bug Causes friction Hop Gui P1 P2 Transforms
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Improve Title Support Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
georgestephanis/p2026#40 ·
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
Margaret-Petersen/food-delivery-app-clone-react-native#1981 ·