React tableau 可视化组件不会在路径道具更改时重新渲染

Question

我有一个网页，它显示一个react组件TableauReports，它显示了一个tableau面板。这是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>

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

Answer 1

在这里查看一些关于嵌入式代码的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>
)
}

Answer 2

这似乎是一个使用vanilla js的外部lib，它可能没有检测到react正在执行的dom更改，因此没有更新viz。在这种情况下，我个人只是在组件上放了一个自定义键。它会导致一个完整的重读，所以这对你来说可能不可行，但它应该有效。

类似的东西

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

或

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