React: O React está falhando com as tags de script.

Criado em 11 abr. 2015  ·  3Comentários  ·  Fonte: facebook/react

React não está gostando disso:

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

Qual é a solução?

Comentários muito úteis

Você provavelmente quer isso. Mas mesmo assim, seu script provavelmente não será executado (a maioria dos navegadores não executa scripts quando innerHTMLed.

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

Todos 3 comentários

Você pode ser mais específico? O que você esperava que fosse acontecer? O que aconteceu em vez disso?

Você provavelmente quer isso. Mas mesmo assim, seu script provavelmente não será executado (a maioria dos navegadores não executa scripts quando innerHTMLed.

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

Doce, isso funcionaria! É type="x-shader/x-vertex" , etc, então o navegador não deve lê-lo de qualquer maneira. Posso pegá-lo mais tarde (componentDidMount) para compilar os shaders. Ironicamente, acabei usando apenas strings de modelo fora do JSX, que acaba tendo destaque de sintaxe no Vim, então ainda melhor.

Esta página foi útil?
0 / 5 - 0 avaliações