: показать javascript внутри render как обычный текст

Question

Я хочу показать код javascript как обычный текст внутри функции рендеринга. Каков наилучший способ, чтобы предотвратить выполнение кода? В HTML я могу использовать код и pre.

render() { 
    return <code> 
       var path = require('path'); 
       var config = { 
        entry: path.resolve(__dirname, 'app/main.js'), 
        output: { 
         path: path.resolve(__dirname, 'build'), 
         filename: 'bundle.js' 
        }, 
       module: { 
        loaders: [{enter code here 
         test: /\.jsx?$/, 
         loader: "babel-loader", 
         query: { 
          presets: ["es2015", "react"] 
         } 
        }, { 
         test: /\.css$/, 
         loader: 'style!css' 
        }, { 
         test: /\.(png|jpg)$/, 
         loader: 'url' 
        }, { 
         test: /\.(eot|woff|ttf|svg)$/, 
         loader: 'url?limit=100000' 
        }] 
       } 
       }; 

      module.exports = config; 

      </code> 
} 

Answer 1

В ES6 вы можете использовать template strings и вам не нужно бежать код:

render() { 
    return <code> {` 
       var path = require('path'); 
       var config = { 
        entry: path.resolve(__dirname, 'app/main.js'), 
        output: { 
         path: path.resolve(__dirname, 'build'), 
         filename: 'bundle.js' 
        }, 
       module: { 
        loaders: [{enter code here 
         test: /\.jsx?$/, 
         loader: "babel-loader", 
         query: { 
          presets: ["es2015", "react"] 
         } 
        }, { 
         test: /\.css$/, 
         loader: 'style!css' 
        }, { 
         test: /\.(png|jpg)$/, 
         loader: 'url' 
        }, { 
         test: /\.(eot|woff|ttf|svg)$/, 
         loader: 'url?limit=100000' 
        }] 
       } 
       }; 

      module.exports = config; 
      `} 
      </code> 
} 

Answer 2

Вы можете вернуть его в виде строки, помещая кавычки вокруг него, как это:

render() { 
    return " 
       var path = require('path'); 
       var config = { 
        entry: path.resolve(__dirname, 'app/main.js'), 
        output: { 
         path: path.resolve(__dirname, 'build'), 
         filename: 'bundle.js' 
        }, 
       module: { 
        loaders: [{enter code here 
         test: /\.jsx?$/, 
         loader: \"babel-loader\", 
         query: { 
          presets: [\"es2015\", \"react\"] 
         } 
        }, { 
         test: /\.css$/, 
         loader: 'style!css' 
        }, { 
         test: /\.(png|jpg)$/, 
         loader: 'url' 
        }, { 
         test: /\.(eot|woff|ttf|svg)$/, 
         loader: 'url?limit=100000' 
        }] 
       } 
       }; 

      module.exports = config; 

      "; 
} 

Убедитесь, что вы избежать все цитаты, используемые в коде с. (Я сделал это для вас в моем примере)

Answer 3

Я бы обернуть код в тег пользовательского сценария и нагрузки код при необходимости. Это предотвращает возможную интерполяцию выражения в подходе шаблона.

<script type="raw_js" id="raw-js"> 
    // your js code here, which needs to display 
</script> 

нагрузка:

render: function() { 
    var code = document.getElementById('raw-js').innerHTML; 
    return <code><pre>{code}</pre></code>; 
} 

См образца при jsFiddle.