React/J에서 물결 괄호를 일반 텍스트로 렌더링SX

React/J에서 물결 괄호를 일반 텍스트로 렌더링SX

반응에서 { 및 }을(를) 텍스트로 표시하는 데 문제가 있습니다.누군가 끈 전체를 컬로 감싸라고 한 것과 비슷한 질문을 보았지만, 이것은 효과가 없습니다.

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;
        }

그return (<p>{"{{}}"}<p>)원인들

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.

jsx로 곱슬곱슬한 교정기를 피하는 쉬운 방법이 있나요?

JSX 문서에서 물결 괄호를 일반 텍스트로 렌더링하려면 HTML 문자 코드를 사용하십시오.

왼쪽 곱슬머리 괄호 { :{

오른쪽 곱슬머리 괄호 }:}

그냥 오타인 것 같아요.다음과 같은 것이 있습니다.

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

단, 이것이 필요합니다(마무리에 주의).p다른 열림 대신 태그 지정):

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

ES6에서는 문자열 보간도 사용할 수 있습니다.템플릿 리터럴은 표현식을 포함할 수 있는 문자열 리터럴입니다.여러 줄 문자열 및 문자열 보간 기능을 사용할 수 있습니다.템플릿 리터럴은 이중 따옴표 또는 단일 따옴표 대신 백틱(' ')(중대 액센트) 문자로 둘러싸여 있습니다.

eg: return (<p>{`{{}}`}</p>)

사용할 수 없는 상황일 경우{그리고.}커스텀 코드를 사용할 수 있습니다.

export default class Component extends React.Component {
  render () {
    return (
      Some object {'{'}id: 1{'}'}
    )
  }
}

그러면 텍스트가 출력됩니다.Some object {id: 1}

업데이트: @xec 덕분에 더 나은 솔루션으로 변경되었습니다.

언급URL : https://stackoverflow.com/questions/46614716/render-curly-braces-as-plain-text-in-react-jsx