Question

我想在渲染函数中将javascript代码显示为纯文本。什么是最好的方法，以防止代码执行？在HTML中我可以使用代码和前。

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而无需转义代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/widget_frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="6dp" >

    <TextView
        android:id="@+id/tvCheckItOut"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:paddingBottom="5dp"
        android:text="Check it out"
        android:textStyle="bold" >
    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/tvCheckItOut"
        android:text="Check it out" >
    </TextView>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />
</RelativeLayout>
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="6dp" >

    <TextView
        android:id="@+id/tvSeekbarSummary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:paddingBottom="5dp"
        android:text="SeekBar"
        android:textStyle="bold" >
    </TextView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/tvSeekbarSummary"
        android:text="Summary" >
    </TextView>

</RelativeLayout>
<SeekBar
   android:id="@+id/seekBarPrefSeekBar"
   android:layout_width="fill_parent"
   android:progress="100"
   android:layout_height="wrap_content" />

 </LinearLayout>

Answer 2

我会将代码包装到自定义脚本标记中，并在需要时加载代码。这可以防止模板字符串方法中可能的表达式插值。

<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处的示例。

Answer 3

您可以通过在其周围加上引号将其作为字符串返回：

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;

            ";
}

确保使用a转义代码中使用的所有引号。（我在我的例子中为你做过）

反应：在渲染中显示javascript为纯文本

3 个答案: