ui5-webcomponents - 标签容器渲染问题
问题描述
我正在使用 ui5 we components 渲染应用程序。在这里我准备了标签容器。
const App = () =>{
const [aSelectedTab, setSelectedTab] = useState<string[]>([]);
const prepareTabData = (oGroupField) => {
//It's return a component which contains a table, Form, backend calls
};
const renderSelectedTab = (oEvent) => {
setSelectedTab((aSelectedTab) => [...aSelectedTab, oEvent.detail.tab.dataset.id]);
};
return (
<TabContainer onTabSelect={renderSelectedTab}>
{aGroupFields.map((oGroupField) => (
<Tab data-id={oGroupField.field_name} text={oGroupField.field_name}>
{aSelectedTab.includes(oGroupField.field_name) &&
<Fragment>{prepareTabData(oGroupField)}</Fragment>
}
</Tab>
))}
</TabContainer>
);
}
在每个选项卡中都有包含大量数据的表,因此我决定仅按需加载表。解决了仅按需渲染的浪费渲染和组件。它提供了一些更好的性能。但我遇到了一些问题。也就是说,一旦我在一个选项卡中添加内容并导航到另一个选项卡并添加内容,接下来返回到上一个选项卡的数据就消失了。如何解决这个问题以实现快速渲染?
解决方案
推荐阅读
- html - 在旁边显示一个 $ 符号在同一条线上
- spring - 无法访问此站点 localhost 拒绝连接。在空项目上
- javascript - Dynamically made strings for id in JSX
- firebase - 使用 Firestore 安全规则来控制对使用“使用 Stripe 运行订阅付款”扩展的订阅相关数据的访问
- amazon-web-services - AWS lightsail + Cloudflare 入站安全组
- ios - APPLE APP SITE ASSOCIATION (AASA) 故障排除 - iOS - Wordpress 托管站点
- javascript - 为什么我的 SCSS 在我用 React.js 搭建的 Laravel 项目中的 webpack.mix.js 中却无法加载?
- javascript - HTML 多个不同的“全选”复选框
- c# - 使用asp.net核心的控制器和路由问题
- sql - 递归 SQLite 查询