React: React schlägt mit Skript-Tags fehl.

Erstellt am 11. Apr. 2015  ·  3Kommentare  ·  Quelle: facebook/react

React gefällt das nicht:

    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>
        );
    }

Was ist die Problemumgehung?

Hilfreichster Kommentar

Wahrscheinlich willst du das. Aber trotzdem wird Ihr Skript wahrscheinlich nicht ausgeführt (die meisten Browser führen keine Skripts aus, wenn innerHTMLed.

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

Alle 3 Kommentare

Kannst du genauer sein? Was hast du erwartet? Was ist stattdessen passiert?

Wahrscheinlich willst du das. Aber trotzdem wird Ihr Skript wahrscheinlich nicht ausgeführt (die meisten Browser führen keine Skripts aus, wenn innerHTMLed.

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

Süß, das würde funktionieren! Es ist type="x-shader/x-vertex" usw., also sollte der Browser es sowieso nicht lesen. Ich kann es später greifen (componentDidMount), um die Shader zu kompilieren. Ironischerweise habe ich am Ende nur Template-Strings außerhalb von JSX verwendet, was am Ende eine Syntaxhervorhebung in Vim hat, also noch besser.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen