React: React не работает с тегами script.

Созданный на 11 апр. 2015  ·  3Комментарии  ·  Источник: facebook/react

Реакции это не нравится:

    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();
`}} />

Все 3 Комментарий

Можете быть более конкретными? Что вы ожидали? Что произошло вместо этого?

Вы, вероятно, хотите этого. Но даже в этом случае ваш скрипт, вероятно, не будет выполняться (большинство браузеров не будут выполнять скрипты, если в файле innerHTML.

<script dangerouslySetInnerHTML={{__html: `
  alert();
`}} />

Сладкий, это сработает! Это type="x-shader/x-vertex" и т. д., поэтому браузер в любом случае не должен его читать. Я могу взять его позже (componentDidMount) для компиляции шейдеров. По иронии судьбы, в итоге я просто использовал строки шаблонов вне JSX, что привело к подсветке синтаксиса в Vim, что даже лучше.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги