React.js Material-UI 如何在子组件中控制隐藏父组件的Tab标签

要实现子组件控制父组件Tab标签隐藏，基于React单向数据流的设计，你需要把父组件的状态修改方法通过props传递给子组件调用，具体实现如下：

1. 父组件改造 #

首先在父组件中定义控制Tab显隐、当前激活Tab的状态，以及对应的修改方法，之后通过props传递给Tab2Component：

// 父组件代码片段
import React, { useState } from 'react';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Tab1Component from './Tab1Component';
import Tab2Component from './Tab2Component';

export default function ParentComponent() {
  // 控制当前激活的Tab索引
  const [activeTab, setActiveTab] = useState(0);
  // 控制Tab2是否显示
  const [showTab2, setShowTab2] = useState(true);

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  // 隐藏Tab2的方法，传递给子组件调用
  const hideTab2 = () => {
    setShowTab2(false);
    setActiveTab(0); // 隐藏后自动切回Tab1
  };

  return (
    <div>
      <Tabs value={activeTab} onChange={handleTabChange}>
        <Tab label="Tab1" />
        {/* showTab2为true时才渲染Tab2标签 */}
        {showTab2 && <Tab label="Tab2" />}
      </Tabs>
      {activeTab === 0 && <Tab1Component />}
      {activeTab === 1 && showTab2 && <Tab2Component hideTab2={hideTab2} />}
    </div>
  )
}

2. 子组件改造 #

子组件不需要自己维护切换Tab的状态，直接调用props传递的hideTab2方法即可：

// 修改后的Tab2Component代码
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";

function Tab2ComponentFunction(props) {
  const { children, value, index, ...other } = props;
  return <div />;
}

export default function Tab2Component(props) {
  const [Tab2Show, setTab2Show] = useState(false);

  const onTab2Hide = () => {
    alert("onTab2Hide");
    setTab2Show(false);
    // 调用父组件传递的方法，完成隐藏Tab2+切回Tab1的操作
    props.hideTab2();
  };

  return (
    <div>
      <Button 
        className="mr10" 
        variant="light" 
        onClick={onTab2Hide}
      >
        hide tab 2
      </Button>
      Tab2Component content
    </div>
  );
}

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