ReactJs: imposta gli attributi dei dati sugli elementi senza JSX

React supporta gli attributi data- * e aria- * sugli elementi. Quando utilizzo l'API del componente, suppongo che questi attributi possano essere impostati come il resto:ReactJs: imposta gli attributi dei dati sugli elementi senza JSX

React.DOM.div({style: {...}, dataMyFoo: 'bar'}, ...)

No. Questo non funziona. L'attributo dataMyFoo viene silenziosamente ignorato. Ho letto da qualche parte che questi devono essere tutti in minuscolo. Che ne dite:

React.DOM.div({style: {...}, datamyfoo: 'bar'}, ...)

Di nuovo, silenziosamente ignorato.

È possibile? Se è così, qual è il segreto? Ho passato un po 'di tempo a cercare senza trovare la risposta.

fonte

2014-07-15 DavidM

La risposta, a quanto pare, è quello di utilizzare trattini separati da tutti i nomi minuscoli per l'attributo di dati, in questo modo:

React.DOM.div({style: {...}, 'data-my-foo': 'bar'}, ...)

Si noti che è necessario citare il nome dell'attributo in questo caso, dal momento che i trattini sono non consentito negli identificatori in Javascript.

fonte

2014-07-15 20:01:55 DavidM

Sì, questo è corretto. Stiamo considerando di passare a un modello di dataSet: {myFoo: 'bar'} 'in futuro, che metterebbe' data-my-foo = "bar" 'nel DOM. Questo segue da vicino l'API DOM per l'accesso agli attributi dei dati. –

@ PaulO'Shannessy che suona perfetto. Una delle cose che ho inizialmente provato era 'data: {myFoo: 'bar'}' quindi questo segue da vicino ciò che ero naturalmente incline a fare. – DavidM

Che dire di dati- * attributi che non hanno valore? dovresti semplicemente fare '{'data-foo-bar': true}'? o qualcos'altro? –

ReactJs: imposta gli attributi dei dati sugli elementi senza JSX

risposta

Problemi correlati