Rendre les accolades comme le texte brut réagit / jsx

Question

J'ai des problèmes pour afficher {et} sous forme de texte dans React. J'ai vu une question similaire que quelqu'un a dit d'envelopper la chaîne entière dans des boucles, mais cela ne fonctionne pas:

let queries_block = this.state.previous_queries.map((dataset) => {
            return (<p>{"{{}}"}<p>)
        });

        if (results) {
            results_block = (
                <div>
                    <p>Queries:</p>
                    {queries_block}
                    <br/><br/>
                    <p>Results: {results_count}</p>
                    <JSONPretty id="json-pretty" json={results}></JSONPretty>
                </div>
            );
        } else {
            results_block = null;
        }

La return (<p>{"{{}}"}<p>) provoque

ERROR in ./src/components/app.js
Module build failed: SyntaxError: Unexpected token, expected } (47:13)

  45 |                     <JSONPretty id="json-pretty" json={results}></JSONPretty>
  46 |                 </div>
> 47 |             );
     |              ^
  48 |         } else {
  49 |             results_block = null;
  50 |         }

 @ ./src/index.js 15:11-38
webpack: Failed to compile.

Existe-t-il un moyen facile d'échapper aux accolades en jsx?

Answer 1

Je pense que le problème n'est qu'une faute de frappe. Tu as ceci:

return (<p>{"{{}}"}<p>)

mais vous en avez besoin (notez la balise de fermeture p au lieu d'une autre ouverture):

return (<p>{"{{}}"}</p>)

Answer 2

Si vous souhaitez rendre les accolades en texte brut dans un document JSX, utilisez simplement les codes de caractères HTML.

Accolade frisée gauche {: {

Accolade droite}: }