Реакции это не нравится:
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>
);
}
Каков обходной путь?
Можете быть более конкретными? Что вы ожидали? Что произошло вместо этого?
Вы, вероятно, хотите этого. Но даже в этом случае ваш скрипт, вероятно, не будет выполняться (большинство браузеров не будут выполнять скрипты, если в файле innerHTML.
<script dangerouslySetInnerHTML={{__html: `
alert();
`}} />
Сладкий, это сработает! Это type="x-shader/x-vertex"
и т. д., поэтому браузер в любом случае не должен его читать. Я могу взять его позже (componentDidMount) для компиляции шейдеров. По иронии судьбы, в итоге я просто использовал строки шаблонов вне JSX, что привело к подсветке синтаксиса в Vim, что даже лучше.
Самый полезный комментарий
Вы, вероятно, хотите этого. Но даже в этом случае ваш скрипт, вероятно, не будет выполняться (большинство браузеров не будут выполнять скрипты, если в файле innerHTML.