comment utiliser les caractères d'échappement dans JSX

Question

Je souhaite utiliser des caractères d'échappement dans mon React application mais je n'ai trouvé aucune ressource expliquant comment utiliser le caractère d'échappement dans mon application.

Existe-t-il une méthodologie?

Answer 1

Utilisez le même d'échappement comme Javascript (ECMAScript)

\' simple citation

\" double citation

\ barre oblique inverse

\ n nouvelle ligne

\ r retour chariot

\ t tab

\ b retour arrière

\ f flux de formulaire

Pour la partie HTML, utilisez des caractères d'échappement HTML.

Il y a quelques mineures gotchas , à savoir comme évaluer les caractères d'échappement entre {}

HTML:

<div id="container">
    <!-- This element's contents will be replaced with MyComponent. -->
</div>

JSX:

class MyComponent extends React.Component {
  render() {
    console.info('Test line\nbreak');
    return <div>Hello {this.props.name} &lt;> </div>;
  }
}

ReactDOM.render(
  <MyComponent name="Stackoverflow  &lt; !-- comment in name -->" />,
  document.getElementById('container')
);

Ce programme imprime ceci sur la console:

Test line
break

Ajouter l'écran de l'utilisateur est le suivant:

Bonjour Stackoverflow <! - commentaire dans le nom -> <>