Escape Curly Brackets in props.children - javascript, reactjs, react-jsx

Estoy tratando de pasar una plantilla de Manillar para ser procesada como this.props.children utilizando el siguiente fragmento de código JSX:

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

El resultado es Uncaught ReferenceError: address is not defined.

Una solución fue usar algo como:

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

Y luego usar this.props.children.props.content. Esta es la única manera que he encontrado para escapar esencialmente {{address}} siendo interpretado como interpolación por JSX.

¿Hay una forma sencilla de escapar de llaves en JSX?

Respuestas

14 para la respuesta № 1

Trate de envolver el contenido del componente en llaves:

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

Todo el contenido entre llaves será una expresión y no se analizará como JSX. Al menos, funciona en. Babel REPL

---

5 para la respuesta № 2

Como Literales de plantilla se introducen en ES6, podemos usarlos aquí sin introducir demasiados frenos.

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

Enlace a JSFiddle

Espero que esto ayude :)

---

2 para la respuesta № 3

Prueba esto:

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

---

1 para la respuesta № 4

Ya que no puedo comentar aún ...;) Por supuesto, no tiene que escapar de todo el texto, solo los paréntesis. Lo que haga en su caso es una cuestión de preferencia personal.

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

---