React is failing with script tags.

[trusktr]

React is not liking this:

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

What's the workaround?

[sophiebits]

Can you be more specific? What did you expect to happen? What happened instead?

[zpao]

You probably want this. But even so, your script probably won't execute (most browsers won't execute scripts when innerHTMLed.

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

[trusktr]

Sweet, that would work! It's type="x-shader/x-vertex", etc, so the browser isn't supposed to read it anyways. I can grab it later (componentDidMount) to compile the shaders. Ironically, I ended up just using template strings outside of the JSX, which ends up having syntax highlight in Vim, so even better.