javascript - 反应 | 带有 Typecript 下拉菜单的可重用下拉组件不起作用
问题描述
我想在按钮上创建一个可重用的下拉菜单,并允许其他人将任何想要的数据传递给它。它是用我不太熟练的 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;
}
我也在应用程序中使用引导程序。因此,也可以从那里找到解决方案..
有人可以帮助我,使其工作。我的意思是我不确定它有什么问题。另外,我收到这个 eslint 错误说:
Non-interactive elements should not be assigned mouse or keyboard event listeners.eslint(jsx-a11y/no-noninteractive-element-interactions)
解决方案
推荐阅读
- bash - 如何将列中的日期转换为 bash 中的纪元时间戳?
- hibernate - 查找 hibernate 在哪里应用命名策略
- ruby - X509::Attribute#value 返回什么?
- vb.net - 查看对象时VS 2015 VB调试崩溃
- python - 我怎样才能用一个多字段来做一个跟随系统?
- java - 为什么不相关的网络活动会提高慢环回性能?
- javascript - 使用字典过滤 javascript 数据对象
- javascript - 发布到网络时未提供 Google 电子表格 ID
- javascript - 未捕获的引用错误:表单未在 loadEventListeners 中定义
- python - 努力让 Sum() 函数从列表中输出一个值