رد الفعل لم يعجبه هذا:
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>
);
}
ما الحل؟
يمكنك أن تكون أكثر تحديدا؟ ماذا تتوقع أن يحدث؟ ماذا حدث بدلا من ذلك؟
ربما تريد هذا. ولكن بالرغم من ذلك ، من المحتمل ألا يتم تنفيذ البرنامج النصي (معظم المتصفحات لن تنفذ البرامج النصية عندما تكون innerHTMLed.
<script dangerouslySetInnerHTML={{__html: `
alert();
`}} />
حلوة ، هذا سيعمل! إنه type="x-shader/x-vertex"
، إلخ ، لذا من المفترض ألا يقرأه المتصفح على أي حال. يمكنني الحصول عليه لاحقًا (componentDidMount) لتجميع التظليل. ومن المفارقات ، أني انتهيت من استخدام سلاسل القوالب خارج JSX ، والتي انتهى بها الأمر إلى تمييز بناء الجملة في Vim ، لذلك أفضل.
التعليق الأكثر فائدة
ربما تريد هذا. ولكن بالرغم من ذلك ، من المحتمل ألا يتم تنفيذ البرنامج النصي (معظم المتصفحات لن تنفذ البرامج النصية عندما تكون innerHTMLed.