Patternfly中LoginPage组件语言选择器的使用方法

设计图标号为2的语言选择器不是LoginPage组件顶层直接暴露的配置属性，需要通过子组件插槽传入自定义内容实现，具体操作如下：

• 导入依赖组件：除基础的LoginPage外，额外导入LoginMainHeader组件，搭配Patternfly自带的下拉选择组件（Select/Dropdown均可）实现语言选择交互
• 独立编写语言选择下拉的交互逻辑，封装为独立的React节点
• 渲染LoginPage时，给组件传入header属性，属性值为LoginMainHeader组件实例，将提前写好的语言选择器节点传入LoginMainHeader的listItem属性，渲染出的内容就会对应到设计稿中语言选择器的位置

最简实现代码参考：

import { LoginPage, LoginMainHeader, Select, SelectOption } from '@patternfly/react-core';
import { useState } from 'react';

const CustomLoginPage = () => {
  const [currentLang, setCurrentLang] = useState('zh-CN');
  const [langSelectOpen, setLangSelectOpen] = useState(false);

  // 自定义语言选择器节点
  const languageSelector = (
    <Select
      isOpen={langSelectOpen}
      onToggle={() => setLangSelectOpen(prev => !prev)}
      onSelect={(_, selectedLang) => {
        setCurrentLang(selectedLang);
        setLangSelectOpen(false);
      }}
      selections={currentLang}
    >
      <SelectOption value="zh-CN">简体中文</SelectOption>
      <SelectOption value="en-US">English</SelectOption>
    </Select>
  );

  return (
    <LoginPage
      header={
        <LoginMainHeader
          title="系统登录"
          subtitle="请输入您的账号凭证完成登录"
          listItem={languageSelector}
        />
      }
      loginTitle="账号登录"
    >
      {/* 此处放置登录表单、忘记密码等其他登录页相关内容 */}
    </LoginPage>
  )
}

官方示例仅展示了语言选择器的最终呈现效果，没有单独标注对应配置入口，加上LoginPage顶层的属性定义列表里没有对应字段，很容易找不到配置位置——这个控件的配置入口挂载在LoginMainHeader子组件的属性上，不属于LoginPage的直接接收属性。

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