当路径道具更改时，React 画面可视化组件不会重新呈现

Question

我有一个显示 React 组件 TableauReports 的网页，它显示了一个画面仪表板。这是 TableaReports 组件：

const TableauReports = ({ selectedBtn }) => {

    console.log(`selectedBtn = ${selectedBtn}`)

    return (
      <div className='tableauPlaceholder' style={{ width: '1400px', height: '950px' }}>
        <object className='tableauViz' width='1400' height='950' style={{ display: 'none' }}>
          <param name='host_url' value='https%3A%2F%2Ftableauanalytical-east.cloud.privateSite.com%2F' />
          <param name='embed_code_version' value='3' />
          <param name='site_root' value='&#47;t&#47;A_B_C' />
          <param name='name' value={`Reports/${selectedBtn.replace(" ", "")}`} />
          <param name='tabs' value='yes' />
          <param name='toolbar' value='yes' />
          <param name='showAppBanner' value='false' />
        </object>
      </div>
    )
  }

export default TableauReports

在我的 app.jsx 中，组件的访问方式如下：

const [selectedTableauBtn, setSelectedTableauBtn] = useState(constants.TableauButtons[2]);

// some code that sets the selectedTableauBtn... 

<TableauReports selectedBtn={selectedTableauBtn}></TableauReports>

每次 selectedTableauBtn 更改时确实会访问组件，因为 TableauReports 中的 console.log 被触发并打印正确的值。问题是：画面仪表板没有按应有的方式切换选项卡。事实上，仪表板根本不会重新呈现！为什么仪表板没有按照输入 selectedBtn 指定的那样重新呈现和显示更新后的可视化效果？

Answer 1

这似乎是一个使用 vanilla js 的外部库，它可能没有检测到 dom 反应正在执行的更改，因此没有更新可视化。在这种情况下，我个人只是在组件上放置一个自定义键。它会导致完全重新渲染，因此这对您来说可能不可行，但它应该有效。

类似

<TableauReports selectedBtn={selectedTableauBtn} key={selectedTableauBtn} />

或

<object key={selectedBtn}>...</object>

Answer 2

在这里查看一些关于 embedded code 的 Tableau 文档，他们似乎使用 / 作为分隔符。

示例：

<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> 
   <param name='site_root' value='&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' />
</object>

鉴于我找不到很多关于 Tableau 的嵌入编码语法的文档，我建议匹配语法。

<param name='name' value={`Reports&#47;${selectedBtn.replace(" ", "")}&#47;`} />

如果这无法让 iframe 刷新，那么您可能只需要一个更大的锤子来使用 React 键强制重新装载元素。

const TableauReports = ({ selectedBtn }) => {
  console.log({ selectedBtn });

  return (
    <div
      className='tableauPlaceholder'
      style={{ width: '1400px', height: '950px' }}
    >
      <object
        key={selectedBtn} // <-- key to remount `object`
        className='tableauViz'
        width='1400'
        height='950'
        style={{ display: 'none' }}
      >
        <param
          name='host_url'
          value='https%3A%2F%2Ftableauanalytical-east.cloud.privateSite.com%2F'
        />
        <param name='embed_code_version' value='3' />
        <param name='site_root' value='&#47;t&#47;A_B_C' />
        <param
          name='name'
          value={`Reports&#47;${selectedBtn.replace(" ", "")}&#47;`}
        />
        <param name='tabs' value='yes' />
        <param name='toolbar' value='yes' />
        <param name='showAppBanner' value='false' />
      </object>
    </div>
  )
}

当路径道具更改时，React 画面可视化组件不会重新呈现

React tableau visualization component doesn't rerender when path prop changes

iframe

rendering

tableau-api

reactjs