从外部组件单击按钮时在一个组件中打开特定选项卡

Question

我有一个HomePage 组件，它有一个子组件Platform。在平台组件中有一些链接，单击这些链接时，它应该在浏览器中打开一个新选项卡，这将打开另一个组件PlatformFeatures 中的特定选项卡。在 PlatformFeatures 组件中有一个 Tab 组件，其中每个选项卡都有唯一的选项卡编号或索引和 url。这个 url 将与 Platform 组件中链接的那些 url 相同（我猜）。问题是我将单击 Platform 组件中的链接，它将使用 PlatformFeatures 组件中的 Tab 组件的链接打开特定选项卡。这将在浏览器的新选项卡中打开，并且浏览器 URL 将具有特定选项卡的链接可能会在实际链接之后添加为哈希。这样可以与任何人共享唯一链接，如果将 url 粘贴到浏览器中，它将打开选项卡组件的特定选项卡。 这是我的主页组件代码：

import React from 'react';
import PropTypes from 'prop-types';
import Platform from './Platform';

const HomePage = ({ additionalProps }) => {
  const { routes } = additionalProps;

  return (
    <div className="homepage">
      <Platform routes={routes} />
    </div>
  );
};

HomePage.defaultProps = {
  additionalProps: PropTypes.shape({
    routes: null,
  }),
};

HomePage.propTypes = {
  additionalProps: PropTypes.shape({
    routes: PropTypes.shape({
      features: {
        platform: PropTypes.string,
      },
  }),
};

export default HomePage;

这是平台组件：

    import React from 'react';
    import PropTypes from 'prop-types';
    import { I18nText } from '@wtag/react-comp-lib';
    import profile from 'affiliateImages/person-24px.svg';
    import search from 'affiliateImages/search-24px.svg';
    import booking from 'affiliateImages/flight-24px.svg';
    
    const Platform = () => {
    
      const features = [
        {
          id: 0,
          icon: profile,
          name: <I18nText id="homepage.features.profiles.title" />,
          description: <I18nText id="homepage.features.profiles.description" />,
          link: linkToFeatures1,
        },
        {
          id: 1,
          icon: search,
          name: <I18nText id="homepage.features.search.title" />,
          description: <I18nText id="homepage.features.search.description" />,
          link: linkToFeatures2,
        },
        {
          id: 2,
          icon: booking,
          name: <I18nText id="homepage.features.booking.title" />,
          description: <I18nText id="homepage.features.booking.description" />,
          link: linkToFeatures3,
        },
      ];
    
      return (
        <div className="homepage__platform-section">
          <div className="container">
            <div className="homepage__platform-section-header">
              <I18nText id="homepage.features.header.title" />
            </div>
            <div className="grid">
              {features.map(({ icon, name, description, link, id }) => (
                <div
                  className="col-xlg-4 col-lg-4 col-md-6 col-sm-6 col-xs-12 col-xxs-12"
                  key={id}
                >
                  <div>
                    <span>
                      <img
                        src={icon}
                        alt="icon"
                        className="homepage__platform-section-icon"
                      />
                    </span>
                    <span className="homepage__platform-section-name">{name}</span>
                  </div>
                  <div className="homepage__platform-section-description">
                    {description}
                  </div>
                  <div>
                    <a href={link} className="homepage__platform-section-link">
                      <I18nText id="homepage.features.read.link" />
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    };
    
    export default Platform;

这是 PlatformFeatures 组件

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 features = [
  {
    tabNum: 0,
    title: (
      <I18nText
        id="features.platform.profiles"
        className="platform-features__profiles-tab"
      />
    ),
    content: <Profiles />,
  },
  {
    tabNum: 1,
    title: (
      <I18nText
        id="features.platform.search"
        className="platform-features__search-tab"
      />
    ),
    content: <Search />,
  },
  {
    tabNum: 2,
    title: (
      <I18nText
        id="features.platform.booking"
        className="platform-features__booking-tab"
      />
    ),
    content: <Booking />,
  },
];

const getItems = () => {
  return features.map(({ title, content }, index) => ({
    key: index,
    title,
    content,
  }));
};

const PlatformFeatures = () => {
  return (
    <div className="platform-features__tabs">
      <RTabs isVertical={true} items={getItems()} selectedTabKey={2} />
    </div>
  );
};

export default PlatformFeatures;

RTabs 组件中 selectedTabKey 属性中传入的数字是 features 数组中特定项的索引号。因此，当组件在浏览器的新页面中加载时，将自动打开 selectedTab。我想我们需要创建一个函数来获取与在 Platform 组件中单击的链接匹配的 selectedKey 索引并将其传递到此处。我需要建议和代码示例来使用 reactjs 实现所有这些功能。

这是我想要实现的 GIF：http://g.recordit.co/W5nrNZAuOd.gif

Answer 1

我不确定是否了解所有内容，但根据我的理解，您应该使用 react-router https://reactrouter.com/web/example/nesting 专门用于嵌套路由。

您将能够为您的要素指定路线。然后使用您将能够在不同的选项卡之间导航。