Cum pot interpola JSX cu o expresie într-un șir de caractere? (Programare, Reactjs)

benhowdle89 a intrebat.

Caut să realizez următoarele:

<div className="total total-{obj.state}">

Evident, acest lucru se compilează la:

<div class="total total-{obj.state}">

Există o modalitate elegantă în JSX de a evalua expresia din șirul {} în cadrul unui șir de caractere?

Comentarii

  • Dacă folosiți Babel: <div className={ `total total-${obj.state}` }> –  > Por WiredPrairie.
  • @WiredPrairie <3 Babel, mulțumesc! –  > Por benhowdle89.
2 răspunsuri
Anders Ekdahl

Încercați acest lucru (ES5):

<div className={'total total-' + obj.state}>...</div>

Sau cu ES6+

<div className={`total total-${obj.state}`}>...</div>

Amintiți-vă că tot ceea ce se află între { și } este doar Javascript, deci expresia este 'total total-' + obj.state care este apoi setată ca fiind clasa nodului DOM.

Comentarii

  • utilizați acest pachet și pentru manipularea numelui clasei npmjs.com/package/classnames –  > Por Henrik Andersson.
  • 17

  • dacă folosiți babel, ați putea la fel de bine să începeți să folosiți șabloanele de șiruri de caractere cu backticks `. Deci, în acest exemplu, ați folosi: <div className={`total total-${obj.state}`}> –  > Por Sgnl.
  • Doar pentru că puteți folosiți interpolarea șirurilor de caractere, nu înseamnă că ar trebui să o faceți – nu este mai rapidă, iar claritatea ei este o chestiune de dezbatere. Perl5 a avut interpolare de șiruri de caractere încă de la început și a durat ani de zile pentru a deveni tabu ca fiind neclară. –  > Por Lee Goddard.
pedrommuller

Ați putea folosi o expresie react și apoi javascript es6 interpolarea șirurilor de caractere

Ceva de genul acesta:

<div someProp={`${SomeConstOrVariableOrExpression} simple text`}></div>

Comentarii

  • acesta este cel mai bun mod de a face interpolarea șirurilor de caractere –  > Por Francisco Castro.

Tags: