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?
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.
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.