ReactJS混淆了“JS代码作为文本”和真正的JS代码:将javascript代码作为文本添加到ReactJS div中

Question

我有一个react 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 ;

React的div将“code as text”混淆为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

我认为您正在寻找的内容是@dev-null建议的。

试试这个：

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