Escape Curly Brackets в реквизитах

Я пытаюсь передать шаблон Handlebars для обработки как this.props.children с использованием следующего фрагмента JSX:

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

Результат Uncaught ReferenceError: address is not defined.

Обходной путь состоял в том, чтобы использовать что-то вроде:

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

И затем используйте this.props.children.props.content. Это единственный способ, по которому я нашел, по существу, {{address}} интерпретироваться как интерполяция JSX.

Есть ли простой способ избежать фигурных скобок в JSX?

Ответ 1

Попробуйте обернуть содержимое компонента в фигурные скобки:

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

Все содержимое в фигурных скобках будет выражением и не будет анализироваться как JSX. По крайней мере, он работает в Babel REPL

Ответ 2

Как Template Literals введены в ES6, мы можем использовать их здесь, не вводя слишком много фигурных скобок.

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

Ссылка на JSFiddle

Надеюсь, что это поможет:)

Ответ 3

Попробуйте следующее:

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

Ответ 4

Так как мне еще не разрешено прокомментировать...;) Конечно, вам не нужно скрывать весь текст - только фигурные скобки. Что вы делаете в своем случае, это вопрос личных предпочтений.

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