将道具从 'Tab' 传递到 'Pane'（使用 React JS 的语义 UI）

Question

我正在使用带有 React 的语义 UI 'Tab' 模块，并将一些道具从 'Tab' 传递给每个 'Pane'。 如何访问每个 'Pane'?

中的道具

const VideoGallery = () => {
    const [video, setVideo] = useState([]);

    return (
        <div>
            <Tab  
                panes={panes} 
                video={video} //passing 'video' as a prop
            />
        </div>
    )
}

const panes = [
    {
      menuItem: { key: 'allVideos'},
      render: () => 
        <Tab.Pane>
            // Need to access 'video' prop here 
        </Tab.Pane>,
    },
    {
    menuItem: { key: 'oneToOne'},
      render: () => 
        <Tab.Pane>
            // Need to access 'video' prop here 
        </Tab.Pane>,
    },
  ]

Answer 1

如果您想在窗格中使用视频。您可以将窗格更新为函数：

const panes = (video) => {
  return [
    {
      menuItem: { key: "allVideos" },
      render: () => <Tab.Pane >// Using video in here</Tab.Pane>,
    },
    {
      menuItem: { key: "oneToOne" },
      render: () => <Tab.Pane>// Using video in here</Tab.Pane>,
    },
  ];
};


<Tab  
  panes={panes(video)} 
/>