React: React is failing with script tags.

Created on 11 Apr 2015 · 3Comments · Source: facebook/react

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?

Source

trusktr

Most helpful comment

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();
`}} />

zpao on 11 Apr 2015

👍2 😄1

All 3 comments

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

sophiebits on 11 Apr 2015

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();
`}} />

zpao on 11 Apr 2015

👍2 😄1

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.

trusktr on 11 Apr 2015

Was this page helpful?

0 / 5 - 0 ratings