Question

我想在按钮上创建可重用的下拉菜单，并允许其他人将所需的任何数据传递给它。它是用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;

已更新，样式表...

.circle {
  width:3em;
  height:3em;
  border:1px solid  grey;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5em;
  border-radius: 50%;
  box-sizing: border-box;
 }

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

有人可以帮助我，使其正常运行吗？我的意思是我不确定这是怎么回事。另外，我收到此错误提示：

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

反应|带有Typecript下拉菜单的可重用下拉菜单组件不起作用

0 个答案: