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