OHIF记录（八）——添加Header组件的下拉选项

OHIF记录（八）——添加Header组件的下拉选项

打开OHIF的根路由页面，可看到在header的右半部分有一个下拉选项框：

打开html树可以明确看到，这个下拉选项框和左边的图标同属于header部分，既然是基于react框架，那么一定同属于header组件里边。

找到定义header组件的文件，路径：Viewer/platform/viewer/src/components/Header/Header.js
找到class名为header-menu的源码：

<div className="header-menu">
  <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
  <Dropdown title={t('Options')} list={options} align="right" />
</div>

Tips:这里的t函数是i18n模块的一个函数，功能是提供多语言开发的翻译功能，对于t(‘Options’)这个用法，只需要在i18n模块定义好’Options’和’选项’这两个词的映射关系，在编程的时候写Options，在界面上会自动翻译成’选项’。
具体用法见:i18n框架（一）——基础应用及t函数

Header-menu引用了Dropdown组件并传入了参数options给list属性，Dropdown是ohif内部自带的一个组件，一个专门用于做下拉选项框的组件。

title属性：用于定义下拉选项按钮的名称，如果将改成这样：

<Dropdown title='下拉选项框名称' list={options} align="right" />

则会显示：

align属性：用于设置选项框和选项框名称的位置关系，下图分别定义为left和right，感受一下：


可以看到名称和选项的相对位置有明显区别

list属性：这个属性功能比较复杂，也比较重要，是用来设置选项框的具体内容的，输入是一个数组，数组里有多少个对象，就有多少个选项，通过配置对象里的title，icon，onClick属性可以分别定义选项的文本，图标，点击事件。值的传递用了react函数式组件的useEffect和useState的HOOK。

如果要新添加一个选项，可以直接在useEffect里的optionsValue数组后边添加对象，例：

      {
        title: '新添加的选项',
        icon: {
          name: 'angle-left',
        },
        onClick: () =>
          console.log('点了第三个按钮')
      },

如果点击新的选项，则会在后台显示：

这里的icon->name的值参考Icon组件的赋值
OHIF记录（三）——从一个图标开始源码分析