如何在鼠标 enter/leave 事件上呈现 React.Component
How to render React.Component on mouse enter/leave events
在项目列表
中的 onMouseEnter
、onMouseLeave
事件上呈现 React 组件时出现问题
我有一个项目列表
const [isHover, setHover] = useState(false)
...
{data.categories.map((item) => (
<>
<li
key={item.id}
className="list-item"
onMouseEnter={() => {
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
>
<NavLink
to={`/catalogues/${item.name_parameterized}`}
className="list-item-link"
activeClassName="active"
>
{item.name}
</NavLink>
</li>
{isHover && <SubCategory data={item.children} />}
</>
))}
需要在每个 li
的 onMouseLeave
/ onMouseEnter
事件中显示 SubCategory Component with different data
如果我这样做
<ul>
<li>
...
isHover && <SubCategory>
<li>
<ul>
我看到 <SubCategory>
显示 items.length
次,但我只需要显示 一次 <SubCategory>
仅用于悬停 li
Expected result is how on the Walmart site subcategories shown
换句话说,每个元素需要一个不同的状态,因此每个元素还需要一个组件:
function ShowOnHover({ item }) {
const [isHover, setHover] = useState(false);
return (
<>
<li
key={item.id}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<NavLink
to={`/catalogues/${item.name_parameterized}`}
className="list-item-link"
activeClassName="active"
>
{item.name}
</NavLink>
</li>
{isHover && <SubCategory data={item.children} />}
</>
);
}
然后将该组件用作:
data.categories.map((item) => <ShowOnHover item={item} />)
在项目列表
中的onMouseEnter
、onMouseLeave
事件上呈现 React 组件时出现问题
我有一个项目列表
const [isHover, setHover] = useState(false)
...
{data.categories.map((item) => (
<>
<li
key={item.id}
className="list-item"
onMouseEnter={() => {
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
>
<NavLink
to={`/catalogues/${item.name_parameterized}`}
className="list-item-link"
activeClassName="active"
>
{item.name}
</NavLink>
</li>
{isHover && <SubCategory data={item.children} />}
</>
))}
需要在每个 li
的 onMouseLeave
/ onMouseEnter
事件中显示 SubCategory Component with different data
如果我这样做
<ul>
<li>
...
isHover && <SubCategory>
<li>
<ul>
我看到 <SubCategory>
显示 items.length
次,但我只需要显示 一次 <SubCategory>
仅用于悬停 li
Expected result is how on the Walmart site subcategories shown
换句话说,每个元素需要一个不同的状态,因此每个元素还需要一个组件:
function ShowOnHover({ item }) {
const [isHover, setHover] = useState(false);
return (
<>
<li
key={item.id}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<NavLink
to={`/catalogues/${item.name_parameterized}`}
className="list-item-link"
activeClassName="active"
>
{item.name}
</NavLink>
</li>
{isHover && <SubCategory data={item.children} />}
</>
);
}
然后将该组件用作:
data.categories.map((item) => <ShowOnHover item={item} />)