React.js Material-UI：以编程方式从子组件中隐藏父组件选项卡

Posted 2023-02-19

【中文标题】React.js Material-UI：以编程方式从子组件中隐藏父组件选项卡

【英文标题】：React.js Material-UI: Programmatically hide parent component tab from child component

【发布时间】：2021-08-26 20:53:37

【问题描述】：

我正在尝试对子组件隐藏父组件选项卡。

在下面提供我的代码 sn-p 和沙箱

有人可以帮忙吗？任何帮助将不胜感激！

演示：https://codesandbox.io/s/material-demo-8je9d

我已经包含了下面的代码。

Tab2组件

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 [value, setValue] = React.useState(2);
  const [Tab2Show, setTab2Show] = useState(false);

  const onTab2Hide = () => 
    alert("onTab2Hide");
    setTab2Show(false);
    setValue(0); //goto tab1
  ;

  //const handleChange = (event, newValue) => 
  //  setValue(newValue);
  //;

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

【参考方案1】：

我想我明白你想做什么。

您需要将 setValue 函数（来自 SimpleTabs）传递给 Tab2Component。 然后你必须在 onClick 事件期间调用 onTab2Hide。

Try this

【讨论】：

谢谢 afreeman，我不知道该怎么做。

谢谢 afreeman，它导航到 tab1 但还想隐藏 tab2。

支持并验证答案是否有帮助所以我在 SimpleTabs 组件中添加了 hideTab2 状态值。如果 true 在渲染中隐藏选项卡 2，则 false 正常显示选项卡 2。将 setHideTab2 传递给 tab2Component，并在 onclick 事件中将 hideTab2 设置为 true