React: React تفشل مع علامات البرنامج النصي.

تم إنشاؤها على ١١ أبريل ٢٠١٥  ·  3تعليقات  ·  مصدر: facebook/react

رد الفعل لم يعجبه هذا:

    render: function() {
        return (
            <div class="gl-map-container">

                <script id="shader-fs" type="x-shader/x-fragment">
                    precision mediump float;

                    void main(void) {
                        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
                    }
                </script>

                <script id="shader-vs" type="x-shader/x-vertex">
                    attribute vec3 aVertexPosition;

                    uniform mat4 uMVMatrix;
                    uniform mat4 uPMatrix;

                    void main(void) {
                        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
                    }
                </script>

                <canvas width='500' height='500' className="gl-map-canvas">
                </canvas>
            </div>
        );
    }

ما الحل؟

التعليق الأكثر فائدة

ربما تريد هذا. ولكن بالرغم من ذلك ، من المحتمل ألا يتم تنفيذ البرنامج النصي (معظم المتصفحات لن تنفذ البرامج النصية عندما تكون innerHTMLed.

<script dangerouslySetInnerHTML={{__html: `
  alert();
`}} />

ال 3 كومينتر

يمكنك أن تكون أكثر تحديدا؟ ماذا تتوقع أن يحدث؟ ماذا حدث بدلا من ذلك؟

ربما تريد هذا. ولكن بالرغم من ذلك ، من المحتمل ألا يتم تنفيذ البرنامج النصي (معظم المتصفحات لن تنفذ البرامج النصية عندما تكون innerHTMLed.

<script dangerouslySetInnerHTML={{__html: `
  alert();
`}} />

حلوة ، هذا سيعمل! إنه type="x-shader/x-vertex" ، إلخ ، لذا من المفترض ألا يقرأه المتصفح على أي حال. يمكنني الحصول عليه لاحقًا (componentDidMount) لتجميع التظليل. ومن المفارقات ، أني انتهيت من استخدام سلاسل القوالب خارج JSX ، والتي انتهى بها الأمر إلى تمييز بناء الجملة في Vim ، لذلك أفضل.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات