如何在React/Preact应用中运行原生JavaScript（以Masonry布局接入为例）

实际复现的问题场景 #

• 借助react/compat适配多款React生态下的Masonry插件，全部运行失败
• 直接在JSX结构中嵌入原生<script>标签编写Masonry初始化逻辑，触发编译报错
• 原生JavaScript仅能通过组件交互事件（如onClick回调）正常执行，无法在组件渲染阶段直接运行

核心结论 #

Preact/React应用完全支持运行原生JavaScript，但不能照搬传统HTML页面的写法在JSX中嵌入<script>标签执行初始化逻辑，这是当前编译报错的核心原因。

报错根因拆解 #

• JSX不是原生HTML解析器，结构中写的HTML注释、内联<script>块不会被浏览器按原生HTML逻辑解析执行，会直接触发编译层的语法校验错误
• 组件渲染阶段执行的DOM查询逻辑，会抢在目标DOM节点真正挂载完成前运行，哪怕绕开编译校验，也会因为拿不到目标元素抛出运行时空指针错误；这也是为什么原生JS放在onClick这类交互回调里能正常运行——这类回调触发时，DOM已经完成挂载，不存在节点查询时序问题
• 原示例代码中document.querySelctor存在拼写错误（正确为querySelector），就算逻辑位置正确也会直接抛空指针异常

标准实现流程 #

• 无需从CDN引脚本嵌到JSX中，通过本地安装masonry-layout依赖，在组件文件顶部直接导入
• 把Masonry初始化逻辑放到组件DOM挂载完成后的生命周期钩子中执行：
  • 类组件场景：挂载在componentDidMount钩子内执行
  • 函数组件场景：挂载在useEffect钩子内执行，空依赖数组保证仅在首次DOM挂载完成后运行一次
• 在组件卸载的生命周期节点做实例清理：类组件对应componentWillUnmount钩子，函数组件对应useEffect返回的清理函数中销毁Masonry实例，避免内存泄漏
• 开启react/compat适配层时，导入Masonry模块需要添加打包器忽略注释，避免打包器把Masonry依赖的全局DOMAPI做错误的模块转换处理

内容的提问来源于stack exchange，提问作者Toni Michel Caubet