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

最有用的评论

你可能想要这个。但即便如此，您的脚本可能不会执行（大多数浏览器在 innerHTMLed 时不会执行脚本。

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

zpao 于 2015-04-11

👍2 😄1

所有3条评论

你可以说得更详细点吗？你期望会发生什么？反而发生了什么？

sophiebits 于 2015-04-11

你可能想要这个。但即便如此，您的脚本可能不会执行（大多数浏览器在 innerHTMLed 时不会执行脚本。

<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条评论

相关问题