将道具从“Tab”传递到“Pane”(使用React JS的语义UI )

import React from 'react';

const Tab = ({ selectedTab }) => {
  // 选项卡的数据
  const tabData = [
    { id: 1, title: 'Tab 1', content: 'Content 1' },
    { id: 2, title: 'Tab 2', content: 'Content 2' },
    { id: 3, title: 'Tab 3', content: 'Content 3' },
  ];

  // 处理选项卡点击事件
  const handleTabClick = (tab) => {
    // 将选中的选项卡数据传递给Pane组件
    selectedTab(tab);
  };

  return (
    <div>
      {tabData.map((tab) => (
        <button key={tab.id} onClick={() => handleTabClick(tab)}>
          {tab.title}
        </button>
      ))}
    </div>
  );
};

const Pane = ({ selectedTab }) => {
  // 根据选中的选项卡数据展示内容
  const selectedContent = selectedTab ? selectedTab.content : '';

  return <div>{selectedContent}</div>;
};

const App = () => {
  const [selectedTab, setSelectedTab] = React.useState(null);

  // 处理选项卡点击事件
  const handleTabClick = (tab) => {
    setSelectedTab(tab);
  };

  return (
    <div>
      <Tab selectedTab={handleTabClick} />
      <Pane selectedTab={selectedTab} />
    </div>
  );
};

export default App;