2.2 KiB
| id | title | permalink | prev | next |
|---|---|---|---|---|
| jsx-gotchas-it-IT | JSX Gotchas | docs/jsx-gotchas-it-IT.html | jsx-spread-it-IT.html | interactivity-and-dynamic-uis-it-IT.html |
JSX somiglia all'HTML ma ci sono delle differenze importanti da tenere in considerazione.
Nota:
Per le differenze del DOM, come l'attributo
stylein linea, consulta here.
Entità HTML
Puoi inserire entità HTML nel testo letterale in JSX:
<div>Primo · Secondo</div>
Se desideri visualizzare un'entità HTML all'interno di un contenuto dinamico, avrai problemi con il doppio escape, poiché React effettua in maniera predefinita l'escape di tutte le stringhe visualizzate per prevenire un'ampia gamma di attacchi XSS.
// Male: Mostra "Primo · Secondo"
<div>{'Primo · Secondo'}</div>
Esistono molte maniere di aggirare questo problema. La più facile è scrivere i caratteri Unicode direttamente in JavaScript. Dovrai assicurarti che il file sia salvato come UTF-8 e che le appropriate direttive UTF-8 siano impostate in modo che il browser li visualizzi correttamente.
<div>{'Primo · Secondo'}</div>
Un'alternativa più sicura consiste nel trovare il codice Unicode corrispondente all'entità e usarlo all'interno di una stringa JavaScript.
<div>{'Primo \u00b7 Secondo'}</div>
<div>{'Primo ' + String.fromCharCode(183) + ' Secondo'}</div>
Puoi usare array misti con stringhe ed elementi JSX.
<div>{['Primo ', <span>·</span>, ' Secondo']}</div>
Come ultima risorsa, puoi sempre inserire HTML nativo.
<div dangerouslySetInnerHTML={{'{{'}}__html: 'Primo · Secondo'}} />
Attributi HTML Personalizzati
Se passi proprietà che non esistono nella specifica HTML ad elementi HTML nativi, React li ignorerà. Se vuoi usare un attributo personalizzato, devi prefiggerlo con data-.
<div data-custom-attribute="foo" />
Gli attributi per l'Accessibilità del Web che iniziano per aria- saranno gestiti correttamente.
<div aria-hidden={true} />