从外部组件上单击按钮，然后在一个组件中打开特定的标签页

问题描述

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

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实现所有这些功能。

以下是我想要实现的效果的一个图像：http://g.recordit.co/W5nrNZAuOd.gif

解决方法

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

您将能够为功能指定路线。然后，您将可以在不同的标签之间导航。