Ucieczka nawiasów klamrowych w props.children

Question

Próbuję przekazać szablon Kierownice być przetworzony jako this.props.children stosując następujący JSX snippet:

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

Rezultatem jest Uncaught ReferenceError: address is not defined.

Rozwiązaniem było używać coś takiego:

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

a następnie użyć this.props.children.props.content. Jest to jedyny sposób, w jaki udało mi się w istocie uniknąć interpretacji interpolacji JSX przez {{address}}.

Czy istnieje prosty sposób na uniknięcie nawiasów klamrowych w JSX?

Answer 1

Spróbuj owinąć zawartość składników w nawiasach klamrowych:

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

Wszelkie treści w nawiasach będzie wyrazem i nie będzie analizowany jako JSX. Przynajmniej to działa w Babel REPL

Answer 2

Spróbuj tego:

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

Answer 3

Ponieważ nie wolno mi komentować jeszcze ...;) Oczywiście nie trzeba uciekać cały tekst - po prostu nawiasy klamrowe. To, co robisz w twoim przypadku, jest kwestią osobistych preferencji.

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

Answer 4

Jak Template Literals wprowadzono ES6, możemy wykorzystać je tutaj bez wprowadzania zbyt wielu nawiasów klamrowych.

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

Link do JSFiddle

Nadzieja to pomaga :)