如何在Shiny应用的自定义导航标签页中渲染输出（如绘图）？——第二个标签页无法渲染输出的问题咨询

我来帮你搞定这个导航标签页的问题！你的第二个标签页（NAVTWO）无法渲染输出，主要有两个关键原因：

核心问题 #

1. 错误的输出绑定方式：你把renderPlot放在了observeEvent内部，这不符合Shiny的响应式编程逻辑。Shiny的输出对象（比如output$plotOne）应该直接在server函数中声明，依赖对应的输入信号，而不是通过observeEvent来动态创建输出绑定。当你点击NAVTWO的actionLink时，output$plotTwo才被创建，但此时DOM中的plotTwo元素因为初始隐藏，Shiny没能正确关联两者，导致渲染失败。

2. 初始隐藏元素的绑定延迟：Shiny默认不会初始化页面加载时处于display: none状态的输出组件，这也会导致后续触发渲染时无响应。

修正后的完整代码 #

library(shiny)
if (interactive()) {
  options(device.ask.default = FALSE)
  ui = fluidPage(
    ### NAVBAR
    tags$div(class = 'nav',
             tags$button('NAVONE', class = 'navlinks active', id = "defaultOpenNav", onclick = 'openNav(event, "NAVONE")'),
             tags$button('NAVTWO', class = 'navlinks', onclick = 'openNav(event, "NAVTWO")')
    ),
    ### NAVCONTENT
    tags$div(class = 'navcontent', id = 'NAVONE',
             actionLink(inputId = "actnOne", "click to create plot for nav one"),
             plotOutput(outputId = "plotOne")
    ),
    tags$div(class = 'navcontent', id = 'NAVTWO', style = "display: none;",
             actionLink(inputId = "actnTwo", "click to create plot for nav two"),
             plotOutput(outputId = "plotTwo")
    ),
    ### JAVASCRIPT
    tags$script(HTML(
      "function openNav(evt, NavToOpen) {
        // Declare all variables
        var i, navcontent, navlinks;
        // Get all elements with class = 'navcontent' and hide them
        navcontent = document.getElementsByClassName('navcontent');
        for (i = 0; i < navcontent.length; i++) {
          navcontent[i].style.display = 'none';
        }
        // Get all elements with class = 'navlinks' and remove the class 'active'
        navlinks = document.getElementsByClassName('navlinks');
        for (i = 0; i < navlinks.length; i++) {
          navlinks[i].className = navlinks[i].className.replace(' active', '');
        }
        // Show the current tab content and mark button as active
        document.getElementById(NavToOpen).style.display = 'block';
        evt.currentTarget.className += ' active';
      }
      // Trigger default tab open on page load
      document.getElementById('defaultOpenNav').click();"
    ))
  )
  server = function(input, output, session){
    ### PLOT FOR NAV ONE
    output$plotOne = renderPlot({
      # 依赖input$actnOne的点击次数，每次点击都会重新渲染
      req(input$actnOne)
      hist(iris$Sepal.Length)
    })
    
    ### PLOT FOR NAV TWO
    output$plotTwo = renderPlot({
      req(input$actnTwo)
      hist(iris$Sepal.Length)
    })
  }
  shinyApp(ui, server)
}

关键修改说明 #

• 移除observeEvent包裹：直接将renderPlot定义在server函数中，并用req(input$actnOne)和req(input$actnTwo)确保只有点击对应的actionLink后才会渲染图形，这符合Shiny的响应式设计规范。
• 修正JavaScript逻辑：修复了导航按钮active类的移除逻辑（原来错误地使用了tablinks类名，现在改成navlinks），确保切换标签时按钮的active状态正确更新。
• 明确初始隐藏状态：给NAVTWO的navcontent添加style="display: none;"，让初始状态更清晰，同时Shiny在元素被JavaScript显示后，能正确检测到输出组件并完成渲染。

这样修改后，两个标签页的图形都能正常触发渲染啦！

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