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

【问题标题】：React.js Material-UI: Programmatically hide parent component tab from child componentReact.js Material-UI：以编程方式从子组件中隐藏父组件选项卡
【发布时间】：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>
  );
}

【问题讨论】：

标签： javascript html reactjs redux react-hooks

【解决方案1】：

我想我明白你想做什么。

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

Try this

【讨论】：

谢谢 afreeman，我不知道该怎么做。
谢谢 afreeman，它导航到 tab1 但还想隐藏 tab2。
支持并验证答案是否有帮助所以我在 SimpleTabs 组件中添加了 hideTab2 状态值。如果 true 在渲染中隐藏选项卡 2，则 false 正常显示选项卡 2。将 setHideTab2 传递给 tab2Component，并在 onclick 事件中将 hideTab2 设置为 true