如何在Quarto文档中插入JavaScript？解决reactable实例找不到错误

问题详情 #

我正尝试在HTML组件之间传递信息，对操作方法不太熟悉。使用Reactable的Reactable.onStateChange函数后，页面能正常渲染，但浏览器控制台抛出如下错误：

Uncaught Error: reactable instance 'myTable' not found
at _i (reactable_state_change.html:4792:124046)
at Object.rl [as onStateChange] (reactable_state_change.html:4792:124866)
at reactable_state_change.html:4812:19
_i @ reactable_state_change.html:4792
rl @ reactable_state_change.html:4792
(anonymous) @ reactable_state_change.html:4812

我试过将JavaScript代码与其他组件放在同一代码块，也试过单独放在JS代码块，但两种方式都无效。相关代码如下：

---
format: html
editor: source
self-contained: true
execute:
  echo: false
---

```{r}
#| message: false
library(reactable)
library(htmltools)

dat <- data.frame(a = 1:5, b = 11:15)
tab <- reactable(dat, selection = "single", elementId = "myTable")
txt <- withTags(p(id = "mySelection"))
js <- tags$script(HTML(
  "Reactable.onStateChange('myTable', state => {document.getElementById('mySelection').innerHTML = state.selected})"
))
browsable(tagList(tab, txt, js))

<!-- Reactable.onStateChange('myTable', state => {document.getElementById('mySelection').innerHTML = state.selected}) -->

## 问题原因
报错的核心是：JavaScript代码在Reactable实例`myTable`完成初始化前就执行了——此时DOM中虽有该元素，但Reactable还未完成内部实例注册，因此找不到对应实例。

## 解决方法
### 方法一：监听DOM加载完成事件
把JS代码包裹在`DOMContentLoaded`事件监听中，确保页面所有DOM元素加载完成后再执行监听逻辑：
```r
js <- tags$script(HTML(
  "document.addEventListener('DOMContentLoaded', function() {
    Reactable.onStateChange('myTable', state => {
      document.getElementById('mySelection').innerHTML = state.selected
    })
  })"
))

方法二：使用Reactable的onInit选项 #

直接在创建Reactable表格时，通过onInit回调绑定状态变化监听，确保实例初始化完成后立即生效：

dat <- data.frame(a = 1:5, b = 11:15)
tab <- reactable(dat, selection = "single", elementId = "myTable",
                 onInit = HTML("function() {
                   Reactable.onStateChange('myTable', state => {
                     document.getElementById('mySelection').innerHTML = state.selected
                   })
                 }"))
txt <- withTags(p(id = "mySelection"))
browsable(tagList(tab, txt))

这种方式无需额外的script标签，逻辑更紧凑。

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