React: スクリプトタグでReactが失敗します。

作成日 2015年04月11日 · 3コメント · ソース: facebook/react

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>
        );
    }

回避策は何ですか？

ソース

trusktr

最も参考になるコメント

あなたはおそらくこれが欲しいでしょう。ただし、それでも、スクリプトはおそらく実行されません（innerHTML化されている場合、ほとんどのブラウザーはスクリプトを実行しません。

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

zpao 2015年04月11日

👍2 😄1

全てのコメント3件

もっと具体的にできますか？何が起こると思いましたか？代わりに何が起こったのですか？

sophiebits 2015年04月11日

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

zpao 2015年04月11日

👍2 😄1

甘い、それはうまくいくでしょう！ type="x-shader/x-vertex"などなので、ブラウザはとにかくそれを読み取ることは想定されていません。後でそれを取得して（componentDidMount）、シェーダーをコンパイルできます。皮肉なことに、私はJSXの外部でテンプレート文字列を使用することになり、Vimで構文が強調表示されるようになりました。

trusktr 2015年04月11日

このページは役に立ちましたか？

0 / 5 - 0 評価

React: スクリプトタグでReactが失敗します。

最も参考になるコメント

全てのコメント3件

関連する問題