html string added in template form treated as string, not html
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Anfängerfreundlichkeit
- 42/100
- Issue-Typ
- Feature
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- javascript
- Bereich
- frontend
Rechercherichtung
Reproduziere das bereitgestellte Carousel-Beispiel mit dem html Tagged-Template-Einstiegspunkt und konzentriere dich auf den Unterschied zwischen wörtlichem Markup und interpolierten Werten wie ${mainImage} und ${minis}. Ermittle die beabsichtigte Interpolationssemantik und füge eine Abdeckung für das erwartete VDOM-Ergebnis hinzu; erledigt ist dies, wenn interpolierte HTML-Strings ohne die Notwendigkeit eines separat erstellten Elements als Markup gerendert werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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?
- Vorherrschende Sprache
- JavaScript
- Sterne
- 9k
- Forks
- 181
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus developit/htm
-
Sarthak Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 1/100
-
Tugas Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 10/100
-
Tugas Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 1/100
-
type checking templates Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 20/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 35/100
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
mksglu/context-mode#1200 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
neondatabase/website#5944 ·
-
module: core
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
bigbluebutton/bigbluebutton#25849 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
jaegertracing/jaeger-ui#4506 ·