在React中使用react-tabs时点击联系人如何切换到聊天tab面板？

我有一个React应用，其中包含两个tabs标签页：第一个标签页展示已聊天用户列表，第二个标签页展示所有已注册联系人，标签页基础功能运行正常。现在我的需求是：当用户处于第二个标签页时，点击任意用户，自动跳转显示聊天标签页。我使用npm包react-tabs实现标签页功能。

现有代码 #

chatsection.js：已聊天组件和注册联系人组件的父组件 #

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./Style.css";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import Allcontacts from "./Allcontacts";
import ChatedList from "./ChatedList";
import { setTabPane } from "./actions";
import "./Style.css";
const ChatSection = (props) => {
  const dispatch = useDispatch();
  const tab = useSelector((state) => state.tab);
  console.log("tab", tab);
  return (
    <div className="">
      <Tabs>
        <TabList style={{ display: "flex" }}>
          <Tab
            onClick={() => dispatch(setTabPane("chat"))}
            className={` ${tab === "chat" ? "abc" : "1"}`}
          >
            Chats
          </Tab>
          <Tab
            onClick={() => dispatch(setTabPane("contact"))}
            className={` ${tab === "contact" ? "abc" : "1"}`}
          >
            Allcontacts
          </Tab>
        </TabList>

        <TabPanel>
          <ChatedList />
        </TabPanel>
        <TabPanel>
          <Allcontacts />
        </TabPanel>
      </Tabs>
    </div>
  );
};

export default ChatSection;

chated.js #

import React, { useEffect, useState } from "react";
import axios from "axios";
import ShowSingle from "./ShowSingle";
function ChatedList() {
  const [users, setUsers] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    axios
      .get("http://localhost:3005/")
      .then(function (response) {
        setUsers(response.data);
        console.log("users" + JSON.stringify(response.data));
        setLoading(false);
      })
      .catch(function (error) {
        console.log(error);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      {!loading && users.map((user, id) => <ShowSingle key={id} user={user} />)}
    </div>
  );
}
export default ChatedList;

Allcontacts.js #

import React, { useEffect, useState } from "react";
import "./All.css";
import ShowSingle from "./ShowSingle";
import axios from "axios";
import { useDispatch } from "react-redux";
import { setTabPane } from "./actions";
function Allcontacts() {
  const dispatch = useDispatch();

  const [users, setUsers] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    axios
      .get("http://localhost:3005/all")
      .then(function (response) {
        setUsers(response.data);
        console.log("users" + JSON.stringify(response.data));
        setLoading(false);
      })
      .catch(function (error) {
        console.log(error);
        setLoading(false);
      });
  }, []);
  const clickHandler = () => {
    dispatch(setTabPane("chat"));
  };
  return (
    <div>
      {!loading &&
        users.map((user, id) => (
          <ShowSingle key={id} user={user} click={clickHandler} />
        ))}
    </div>
  );
}

export default Allcontacts;

单个用户展示组件ShowSingle.js #

import React from "react";

function ShowSingle({ user, click }) {
  return (
    <div className="wrapper">
      <ul>
        <li onClick={click}>{user.name}</li>
      </ul>
    </div>
  );
}

export default ShowSingle;

问题核心是你只将标签状态存储在Redux中，没有和react-tabs的内置选中状态做绑定，所以Redux状态更新后标签组件不会自动切换。只需要修改ChatSection.js的代码即可：

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./Style.css";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import Allcontacts from "./Allcontacts";
import ChatedList from "./ChatedList";
import { setTabPane } from "./actions";
import "./Style.css";
const ChatSection = (props) => {
  const dispatch = useDispatch();
  const tab = useSelector((state) => state.tab);
  // 将Redux的状态映射为标签组件需要的索引，第一个标签索引为0，第二个为1
  const selectedTabIndex = tab === "chat" ? 0 : 1;
  // 处理手动点击标签时的状态同步
  const handleTabChange = (index) => {
    dispatch(setTabPane(index === 0 ? "chat" : "contact"));
  };
  return (
    <div className="">
      {/* 给Tabs组件绑定选中索引和切换回调 */}
      <Tabs selectedIndex={selectedTabIndex} onSelect={handleTabChange}>
        <TabList style={{ display: "flex" }}>
          <Tab
            className={` ${tab === "chat" ? "abc" : "1"}`}
          >
            Chats
          </Tab>
          <Tab
            className={` ${tab === "contact" ? "abc" : "1"}`}
          >
            Allcontacts
          </Tab>
        </TabList>

        <TabPanel>
          <ChatedList />
        </TabPanel>
        <TabPanel>
          <Allcontacts />
        </TabPanel>
      </Tabs>
    </div>
  );
};

export default ChatSection;

补充说明 #

你提供的Allcontacts.js原始代码存在重复冗余的问题，删除后一段重复的相同代码即可，不影响功能运行。

内容的提问来源于stack exchange，提问作者Wani