我有一个反应组件,其中有一个选项卡组件。这是组件:
import React from 'react';
import { RTabs, I18nText } from '@wtag/react-comp-lib';
import Profiles from './Profiles';
import Search from './Search';
import Booking from './Booking';
const pathName = window.location.href.split('/').reverse()[0];
const features = [
{
tabNum: 0,
title: (
<I18nText
id="features.platform.profiles"
className="platform-features__profiles-tab"
/>
),
content: <Profiles />,
url: '/en-US/p/features/applications/profiles',
},
{
tabNum: 1,
title: (
<I18nText
id="features.platform.search"
className="platform-features__search-tab"
/>
),
content: <Search />,
url: '/en-US/p/features/applications/search',
},
{
tabNum: 2,
title: (
<I18nText
id="features.platform.booking"
className="platform-features__booking-tab"
/>
),
content: <Booking />,
url: '/en-US/p/features/applications/booking',
},
];
const getItems = () => {
return features.map(({ tabNum, title, content, url }, index) => ({
tabNum,
key: index,
title,
content,
url,
}));
};
const PlatformFeatures = () => {
return (
<div className="platform-features__tabs">
<RTabs isVertical={true} items={getItems()} selectedTabKey={2} />
</div>
);
};
export default PlatformFeatures;
在浏览器中加载组件时,默认情况下会选择并打开第一个选项卡。单击相应的选项卡时,该选项卡会打开。选定的选项selectedTabKey
卡索引号可以传递给RTabs 组件的道具,并且该特定选项卡将被选择和打开。如此处所见,通过了索引 2,因此Booking
默认情况下将选择并打开第三个选项卡 ie:。现在我想实现一个功能,即通过匹配它所在的当前 URL 来确定所选选项卡。就像 URL 包含booking
在其中一样,在浏览器加载组件时将打开 Booking 选项卡。如果我将其中的 URL 提供booking
给某人,并且如果他将该 URL 粘贴到浏览器中,它将起作用booking
选项卡将被选中并打开,而不是默认的第一个选项卡。我想如果我可以编写一个函数来确定浏览器 URL 并将其与features
数组中的 url 匹配,如果 url 匹配,它将从数组中获取匹配的选项卡索引并将其传递给selectedTabKey
道具,然后它可能会打开根据浏览器 url 的位置动态选择选项卡。selectedTabKey
props 将始终将 number 作为 PropType。我需要建议和代码示例来实现这些功能。
const browserURL = document.location.pathname;
const filteredURL = features.map(({ url }) => url);
const checkURL = (arr, val) => {
return arr.filter(function(arrVal) {
return val === arrVal;
})[0];
};
const matchedURL = checkURL(filteredURL, browserURL);
const getSelectedTabKey = filteredURL.indexOf(matchedURL);
然后传递getSelectedTabKey
给selectedTabKey
道具
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句