React组件插入WebGL着色器脚本编译失败及变量失效问题

在React组件中通过Helmet插入WebGL着色器脚本时，JSX解析器会误将着色器内的语法（比如大括号、分号）当作JSX语法处理，引发编译错误；若直接用反引号包裹代码，又会出现上层定义的变量无法被识别的问题。以下是两种可行的解决方式：

方法一：使用dangerouslySetInnerHTML注入脚本内容 #

通过React的dangerouslySetInnerHTML属性，将着色器代码以字符串形式传入，避免JSX解析器干扰内部代码：

<Helmet>
  <script 
    id="vertex-shader" 
    type="x-shader/x-vertex"
    dangerouslySetInnerHTML={{ __html: `
      attribute vec4 vPosition;
      attribute vec4 vColor;
      varying vec4 fColor;

      uniform mat4 modelViewMatrix;
      uniform mat4 projectionMatrix;

      void main()
      {
          fColor = vColor;
          gl_Position = projectionMatrix * modelViewMatrix * vPosition;
      }
    ` }}
  />

  <script 
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify({
      "@context": "http://schema.org"
    }) }}
  />

  <script 
    id="fragment-shader" 
    type="x-shader/x-fragment"
    dangerouslySetInnerHTML={{ __html: `
      precision mediump float;

      varying vec4 fColor;

      void main()
      {
          gl_FragColor = fColor;
      }
    ` }}
  />

  {/* 外部脚本保持原有写法即可 */}
  <script src="https://greggman.github.io/webgl-lint/webgl-lint.js" crossorigin />
  <script type="text/javascript" src="https://esangel.github.io/WebGL/Common/webgl-utils.js" />
  <script type="text/javascript" src="https://esangel.github.io/WebGL/Common/initShaders.js" />
  <script type="text/javascript" src="https://esangel.github.io/WebGL/Common/MV.js" />
  <script type="text/javascript" src="index.js" />
</Helmet>

方法二：将着色器代码抽为组件外常量 #

把着色器代码提前定义为组件外部的字符串常量，再在Helmet中引用，既能避免JSX解析问题，也能保证变量被正确识别：

// 组件外部定义着色器和JSON-LD数据
const vertexShaderSource = `
  attribute vec4 vPosition;
  attribute vec4 vColor;
  varying vec4 fColor;

  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;

  void main()
  {
      fColor = vColor;
      gl_Position = projectionMatrix * modelViewMatrix * vPosition;
  }
`;

const fragmentShaderSource = `
  precision mediump float;

  varying vec4 fColor;

  void main()
  {
      gl_FragColor = fColor;
  }
`;

const schemaData = JSON.stringify({
  "@context": "http://schema.org"
});

// 组件内的Helmet部分
<Helmet>
  <script 
    id="vertex-shader" 
    type="x-shader/x-vertex"
    dangerouslySetInnerHTML={{ __html: vertexShaderSource }}
  />

  <script 
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: schemaData }}
  />

  <script 
    id="fragment-shader" 
    type="x-shader/x-fragment"
    dangerouslySetInnerHTML={{ __html: fragmentShaderSource }}
  />

  {/* 外部脚本保持不变 */}
  <script src="https://greggman.github.io/webgl-lint/webgl-lint.js" crossorigin />
  <script type="text/javascript" src="https://esangel.github.io/WebGL/Common/webgl-utils.js" />
  <script type="text/javascript" src="https://esangel.github.io/WebGL/Common/initShaders.js" />
  <script type="text/javascript" src="https://esangel.github.io/WebGL/Common/MV.js" />
  <script type="text/javascript" src="index.js" />
</Helmet>

问题根源说明 #

直接在<script>标签内写着色器代码时，JSX会把代码中的{}当作插值表达式解析，触发语法错误；仅用反引号包裹而不配合dangerouslySetInnerHTML，React仍会将内容按JSX规则处理，或因字符串作用域问题导致上层变量无法识别。

内容的提问来源于stack exchange，提问作者Dmitriy