在 React Native 应用程序的新选项卡中打开链接

Question

我是 React 的新手，我需要制作一个仪表板，其中我将有一个 table 和一些数据。 table 中的其中一列是可点击的，当我点击一个特定的单元格时，它将获取该单元格的值并“在新选项卡中”显示有关该项目的更多详细信息。现在使用浏览器很容易，您可以在 link 单击时打开一个新选项卡。但这是我在铬上制作的应用程序。更多的桌面应用程序。但是我不想把新的window整起来。我需要一个新的标签面板来打开，之前的 table 仍然在一个标签中，而详细信息在新标签中。

所以当我返回到上一个选项卡并单击另一个项目时，它会打开第三个选项卡，其中包含该项目的详细信息。

示例如下（对不起，我还不能插入图片。请点击link查看。）第一张图片首字母 table。 First Picture With the initial table

现在，如果我单击“会计”，将出现一个新选项卡，如第二张图片所示： Second image with a new tab opened

Answer 1

我想我找到了解决办法。我将它粘贴在这里以供寻找解决方案的人使用。

import React, { useState, useCallback, useEffect } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import { Tabs, Tab, IconButton } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import TabContainer from "../TabContainer/index.jsx";

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  colorPrimary: {
    color: "red"
  }
});

export const TabsDemo = ({
  tabs,
  selectedTab = 1,
  onClose,
  tabsProps = { indicatorColor: "primary" },
  ...rest
}) => {
  const [activeTab, setActiveTab] = useState(selectedTab);
  const [activetabs, setActiveTabs] = useState([]);

  //  useEffect(() => {
  //    if (activeTab !== selectedTab) setActiveTab(selectedTab);
  //   }, [setActiveTab, selectedTab, activeTab]);

  // const handleChange = useCallback(event => setActiveTab(event.target.value), [
  //   setActiveTab,
  //  ]);

  useEffect(() => {
    setActiveTabs(tabs);
  }, [tabs]);

  const handleChange = useCallback((event, activeTab) => {
    setActiveTab(activeTab);
  }, []);

  const handleClose = useCallback(
    (event, tabToDelete) => {
      event.stopPropagation();

      const tabToDeleteIndex = activetabs.findIndex(
        tab => tab.id === tabToDelete.id
      );
      const updatedTabs = activetabs.filter((tab, index) => {
        return index !== tabToDeleteIndex;
      });
      const previousTab =
        activetabs[tabToDeleteIndex - 1] ||
        activetabs[tabToDeleteIndex + 1] ||
        {};
      setActiveTabs(updatedTabs);
      setActiveTab(previousTab.id);
    },
    [activetabs]
  );

  return (
    <>
      <div>
        <Tabs value={activeTab} onChange={handleChange}>
          {activetabs.map(tab => (
            <Tab
              key={tab.id}
              value={tab.id}
              label={
                typeof tab.label === "string" ? (
                  <span>
                    {" "}
                    tab.label
                    {tab.closeable && (
                      <IconButton
                        component="div"
                        onClick={event => handleClose(event, tab)}
                      >
                        <CloseIcon />
                      </IconButton>
                    )}
                  </span>
                ) : (
                  tab.label
                )
              }
            />
          ))}
        </Tabs>
        {activetabs.map(tab =>
          activeTab === tab.id ? (
            <TabContainer key={tab.id}>{tab.component}</TabContainer>
          ) : null
        )}
      </div>
    </>
  );
};

TabsDemo.propTypes = {
  classes: PropTypes.object.isRequired,
  tabs: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
      id: PropTypes.number.isRequired,
      component: PropTypes.object.isRequired,
      closeable: PropTypes.bool.isRequired
    }).isRequired
  ).isRequired
};

export default withStyles(styles)(TabsDemo);

下面是代码沙箱的 link，您可以使用它来充分理解这一点： https://codesandbox.io/s/mui-closeable-tab-gw2hw?file=/src/components/tabsdemo/index.jsx:0-3123

在 React Native 应用程序的新选项卡中打开链接

Opening links in new tab in React Native application

reactjs

react-native

react-navigation