React tidak menyukai ini:
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>
);
}
Apa solusinya?
Bisakah Anda lebih spesifik? Apa yang Anda harapkan terjadi? Apa yang terjadi?
Anda mungkin menginginkan ini. Namun demikian, skrip Anda mungkin tidak akan dijalankan (kebanyakan browser tidak akan mengeksekusi skrip saat diinnerHTML.
<script dangerouslySetInnerHTML={{__html: `
alert();
`}} />
Manis, itu akan berhasil! Ini type="x-shader/x-vertex"
, dll, jadi browser tidak seharusnya membacanya. Saya dapat mengambilnya nanti (componentDidMount) untuk mengkompilasi shader. Ironisnya, saya akhirnya hanya menggunakan string template di luar JSX, yang akhirnya memiliki sintaks highlight di Vim, jadi lebih baik.
Komentar yang paling membantu
Anda mungkin menginginkan ini. Namun demikian, skrip Anda mungkin tidak akan dijalankan (kebanyakan browser tidak akan mengeksekusi skrip saat diinnerHTML.