React中使用Semantic UI的Tab组件如何向Pane传递并访问props

你当前写法无法拿到video的原因是Semantic UI React的Tab组件不会自动透传自定义props到panes配置的render回调中，可通过以下两种常用方案解决：

方案1：将panes定义移到组件内部（最简便） #

直接把panes配置写在VideoGallery组件内部，通过JavaScript闭包特性就能直接访问到组件内的video状态，无需额外透传props：

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

    // panes直接定义在组件内部，可直接访问上层的video状态
    const panes = [
        {
          menuItem: { key: 'allVideos'},
          render: () => 
            <Tab.Pane>
                {/* 此处直接使用video变量即可 */}
                {video.map(v => <div key={v.id}>{v.title}</div>)}
            </Tab.Pane>,
        },
        {
        menuItem: { key: 'oneToOne'},
          render: () => 
            <Tab.Pane>
                {/* 同样可直接访问video状态 */}
            </Tab.Pane>,
        },
    ]

    return (
        <div>
            <Tab panes={panes} />
        </div>
    )
}

方案2：将panes抽为动态生成函数 #

如果你的panes配置需要跨组件复用、不能放在VideoGallery内部，可以把panes改成接收参数的函数，使用时传入当前的video状态即可：

// 外部定义为接收video参数的函数
const getPanes = (video) => [
    {
      menuItem: { key: 'allVideos'},
      render: () => 
        <Tab.Pane>
            {/* 使用传入的video参数 */}
        </Tab.Pane>,
    },
    {
    menuItem: { key: 'oneToOne'},
      render: () => 
        <Tab.Pane>
            {/* 使用传入的video参数 */}
        </Tab.Pane>,
    },
]

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

    return (
        <div>
            {/* 调用函数传入当前video状态生成panes配置 */}
            <Tab panes={getPanes(video)} />
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Dan