Javascript React | TypeScript下拉列表不工作的可重用下拉列表组件

我想在一个按钮上创建一个可重用的下拉列表，并允许其他按钮向其传递所需的任何数据。它是用我不太精通的打字脚本制作的，但我让它工作了：

问题在于数据不是在下拉列表中呈现的，而是在下拉列表下的页面中呈现的

代码

import React, { Fragment } from 'react';

import './index.scss';

export interface Props {
  isOpen: boolean;
  options: number;
  data: any;
  select: any;
}

const data = ['one', 'two'];

function HeaderMenuButton<T extends object>(props: Props & T): JSX.Element {
  const { isOpen, options, ...otherProps } = props;
  return (
    <Fragment>
      <i className="fa fa-ellipsis-h fa-lg circle" {...otherProps}>
        {data[options]}
      </i>
      <ul className={isOpen ? 'active' : null}> // I think there is something wrong here..
        {data.map((item, i) => (
          <li key={i} className={i === options ? 'selected' : null} onClick={() => props.select(i)}>
            {item}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

export default HeaderMenuButton;

我还在应用程序中使用引导。因此，也有可能从那里找到解决方案

有人能帮我，让它工作吗。我的意思是，我不确定它到底出了什么问题。此外，我还发现了以下eslint错误：

Non-interactive elements should not be assigned mouse or keyboard event listeners.eslint(jsx-a11y/no-noninteractive-element-interactions)

---

你能发布样式表吗？只是在描述中添加了样式表…我想的是使功能组件成为有状态的组件。并使用setState，但现在我有一个打字脚本问题。。。如果你能找到相关的东西，请帮助。。。谢谢你能发布样式表吗？只是在描述中添加了样式表…我想的是使功能组件成为有状态的组件。并使用setState，但现在我有一个打字脚本问题。。。如果你能找到相关的东西，请帮助。。。谢谢

Non-interactive elements should not be assigned mouse or keyboard event listeners.eslint(jsx-a11y/no-noninteractive-element-interactions)