Fuga graffe in props.children

Question

Sto cercando di passare un modello di manubrio per essere elaborati come this.props.children utilizzando il seguente JSX frammento:

<MyComponent> 
    My address is {{address}}. 
</MyComponent> 

Il risultato è Uncaught ReferenceError: address is not defined.

Una soluzione è stato quello di usare qualcosa come:

<MyComponent> 
    <span content="My address is {{address}}."></span> 
</MyComponent> 

e quindi utilizzare this.props.children.props.content. Questo è l'unico modo in cui ho trovato di sfuggire essenzialmente a {{address}} interpretato come interpolazione da JSX.

Esiste un modo semplice per evitare le parentesi graffe in JSX?

Answer 1

Prova ad avvolgere il contenuto dei componenti in parentesi graffe:

<MyComponent> 
    {"My address is {{address}}."} 
</MyComponent> 

Tutti i contenuti tra parentesi sarà un'espressione e non sarà analizzato come JSX. Almeno, funziona in Babel REPL

Answer 2

Prova questo:

<MyComponent> 
    {'My address is {{address}}.'} 
</MyComponent> 

Answer 3

Dal momento che non mi è permesso di commentare ancora ...;) Naturalmente non c'è bisogno di sfuggire l'intero testo - solo le parentesi graffe. Quello che fai nel tuo caso è una questione di preferenze personali.

<MyComponent> 
My address is {"{{"}address{"}}"}. 
</MyComponent> 

Answer 4

Come Template Literals sono introdotti nel ES6, li possiamo usare qui senza introdurre troppe parentesi graffe.

render() { 
    let address = 'Somewhere on this earth!'; 
    return (
     <MyComponent> 
      {`My address is ${address}`} 
     </MyComponent>  
    ); 
} 

Link JSFiddle

Spero che questo aiuti :)