如何在React中根据选择来显示内容？

Question

我有两个组件Horizontal Tab Component和Vertical Side Bar Component，这两个组件都被合并到一个组件中，即Combined.js中。

我的垂直边栏组件状态包含对象数组，即："我的垂直边栏"。

const [items, setitems] = useState({
    stude: [{ displayid: "12", name: "CHRIS" }, { displayid: "13", name: "RYAN" }]
  });

我如何使用react-bootstrap在水平选项卡上显示内容？

现在主要的问题是我想通过我的 displayid 对于水平标签组件，对于选中的垂直边栏组件，我卡在了这一节中

快速演示，它不能工作的所有虽然因为假网址 https:/codesandbox.iosautumn-violet-063pg?file=App.js。

Answer 1

声明一个 useState 在 合并 组件，并将设置器传递给 纵向 组件来设置 id onSelect 然后通过 id 到了 水平式. 在这里，你可以检查一个 例子.