[英]fade in fade out on hover in reactjs
I am trying to create component in react.我正在尝试在反应中创建组件。 I am on learning mode.我在学习模式。 So may be I am doing totally wrong.所以可能我做的完全错了。 Below is my code下面是我的代码
My Code on sandbx
https://codesandbox.io/s/pedantic-bush-roiv6?fontsize=14&hidenavigation=1&theme=dark 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>
)
}
I was trying something as in jQuery if like have children如果有孩子,我正在尝试 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();
}
}
);
How we can do in react.我们如何做出反应。
This isn't a full answer solving your problem, just some direction you might want to take:这不是解决您问题的完整答案,只是您可能想要采取的一些方向:
What I would do is make <MenuList>
a stateful component rather than functional, and store a bit of state about whether it was being hovered or not.我要做的是使<MenuList>
成为有状态组件而不是功能组件,并存储一些关于它是否被悬停的状态。 On the <ul>
do an onMouseEnter
callback that sets the hovered state and an onMouseLeave
callback that unsets it (sets it to false), and pass down a prop to the next MenuList
about if it should show or not.在<ul>
上执行一个设置悬停状态的onMouseEnter
回调和一个onMouseLeave
设置它(将其设置为 false)的 onMouseLeave 回调,并将一个关于它是否应该显示的道具传递给下一个MenuList
。
You can choose a variety of options to deal with that prop.您可以选择多种选项来处理该道具。 If animation isn't necessary, you can simply add a style
property to the ul
if the props.show === true
:如果不需要动画,您可以在props.show === true
的情况下简单地向ul
添加style
属性:
let styles = {};
if (this.props.show) {
styles = {display:block}
}
...
<ul style={styles}>
...
If animation is required... well then good luck.如果需要动画……那么祝你好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.