[英]fade in fade out on hover in reactjs
我正在尝试在反应中创建组件。 我在学习模式。 所以可能我做的完全错了。 下面是我的代码
My Code on sandbx
https://codesandbox.io/s/pedantic-bush-roiv6?fontsize=14&hidenavigation=1&theme=dark
class MegaMenu extends React.Component {
public render() {
return (
<div className={styles.MegaMenu}>
<div className={styles["menu-container"]}>
<div className={styles.menu}>
<MenuList Options={menus} />
</div>
</div>
</div>
)
}
}
const MenuList = (props: IMenuListProps) => {
return (
<ul>
{
props.Options.map((Option: IMenu, index: number) => (
<li key={index} className={(Option.subitem && Option.subitem.length > 0) ? styles["menu-dropdown-icon"] : styles["normal-sub"]}>
<a href={Option.link}>{Option.name}</a>
{/* Base Case */}
{
(Option.subitem && Option.subitem.length > 0) &&
<MenuList Options={Option.subitem} />
}
</li>
))
}
</ul>
)
}
如果有孩子,我正在尝试 jQuery 中的东西
$(".menu > ul > li").hover(
function (e) {
if ($(window).width() > 943) {
$(this).children("ul").fadeIn(150);
e.preventDefault();
}
}, function (e) {
if ($(window).width() > 943) {
$(this).children("ul").fadeOut(150);
e.preventDefault();
}
}
);
我们如何做出反应。
这不是解决您问题的完整答案,只是您可能想要采取的一些方向:
我要做的是使<MenuList>
成为有状态组件而不是功能组件,并存储一些关于它是否被悬停的状态。 在<ul>
上执行一个设置悬停状态的onMouseEnter
回调和一个onMouseLeave
设置它(将其设置为 false)的 onMouseLeave 回调,并将一个关于它是否应该显示的道具传递给下一个MenuList
。
您可以选择多种选项来处理该道具。 如果不需要动画,您可以在props.show === true
的情况下简单地向ul
添加style
属性:
let styles = {};
if (this.props.show) {
styles = {display:block}
}
...
<ul style={styles}>
...
如果需要动画……那么祝你好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.