ReactJS запутывает «код JS как текст» и настоящий JS-код: добавьте код javascript как текст в ReactJS div

Question

У меня есть компонент JS-ответа, в который я хочу ввести некоторый образец JS-кода в виде текста внутри div.

код выглядит такого рода

render: function() { 
return ( 
    <div id="sample_code_text"> 
     <p> 
     if(1==1) { 
           console.log(50) ; 
     } 
     </p> 
    </div> 
)}; 

я получаю сообщение об ошибке в console.log (50);

Uncaught Error: Parse Error: Line 37: Unexpected token ; 

Реагент div смущает «код как текст» как код JS. Как это исправить?

Answer 1

Вы можете использовать ES6 template strings как так,

render: function() { 
    var a = 10; 
    return ( 
     <div id="sample_code_text"> 
      <p> 
       {` 
        if (1 == 1) { 
         console.log(10); 
        } 
       `} 
      </p> 
     </div> 
    ) 
} 

Example

или использовать растворы с К временным решениям { '{' }, because now there is no solution to easy escape {}

render: function() { 
    var a = 10; 
    return ( 
     <div id="sample_code_text"> 
      <p> 
       if (1 == 1) { '{' } 
        console.log(10); 
       { '}' } 
      </p> 
     </div> 
    ) 
} 

Example

Answer 2

I думаю, что то, что вы ищете, предлагается @ dev-null.
Попробуйте это:

<p> 
     if(1==1) {'{'} 
     console.log(50) ; 
     {'}'} 
    </p>