React n'aime pas ça :
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>
);
}
Quelle est la solution ?
Peux-tu être plus précis? À quoi vous attendiez-vous ? Que s'est-il passé à la place ?
Vous voulez probablement cela. Mais même ainsi, votre script ne s'exécutera probablement pas (la plupart des navigateurs n'exécuteront pas de scripts lorsqu'ils sont innerHTML.
<script dangerouslySetInnerHTML={{__html: `
alert();
`}} />
Chérie, ça marcherait ! C'est type="x-shader/x-vertex"
, etc., donc le navigateur n'est pas censé le lire de toute façon. Je peux le récupérer plus tard (componentDidMount) pour compiler les shaders. Ironiquement, j'ai fini par utiliser des chaînes de modèle en dehors de JSX, ce qui finit par avoir une coloration syntaxique dans Vim, donc encore mieux.
Commentaire le plus utile
Vous voulez probablement cela. Mais même ainsi, votre script ne s'exécutera probablement pas (la plupart des navigateurs n'exécuteront pas de scripts lorsqu'ils sont innerHTML.