javascript - React:如何在悬停父组件时触发更改子组件内部样式的功能
问题描述
最近我在其中制作了一个名为ItemsPageItem的 Item 组件,我还有几个其他组件,其中一个名为OnHoverAboutBlock应该更改位于Grid内部的一些样式。我为传递道具的OnHoverAboutBlock制作了标志,如下所示:
export default function ItemsPageItemContent({serialNum, title, price, shortDescription, type}) {
const localStyles = useStyles();
const [isHover, setIsHover] = useState(false);
function onEnter(e){
e.target.style.position = "absolute";
e.target.style.overflow = "visible";
e.target.style.height = 350;
}
function onLeave(e){
e.target.style.position = "relative";
e.target.style.overflow = "hidden";
e.target.style.height = 135;
}
return (
<>
<Grid container onMouseEnter={`${() => setIsHover(true)}`} onMouseLeave={`${() => setIsHover(false)}`} className={localStyles.itemBoxContainer}>
<Grid item className={localStyles.itemBox} xs={12}>
<Grid item xs={12} className={localStyles.widgetBlock}>
<Grid item xs={2}>
<SerialNumber serialNumber={serialNum}/>
</Grid>
<Grid item className={localStyles.typeBox} xs={8}>
<TypeOfLot type={type}/>
</Grid>
<Grid item xs={2}>
</Grid>
</Grid>
</Grid>
<OnHoverAboutBlock **isHover={isHover}** title={title} price={price}
desc={shortDescription} type={type}/>
</Grid>
</>
);
问题是我如何在孩子内部触发onEnter onLeave函数。我试图在OnHoverAboutBlock中编写这些函数,但我仍然不明白如何触发这些函数。OnHoverAboutBlock的代码如下所示:
export const OnHoverAboutBlock = ({title, price, desc, type, **isHover**}) => {
const localStyles = useStyles();
let buttonText = "Place Bid";
switch (type) {
case "Product":
buttonText = "Buy Now";
break;
case "Donation":
buttonText = "Make Donation";
break;
default:
break;
}
return (
<>
<Grid item className={`${localStyles.hoverAboutBlock}`} xs={12}>
<Grid item className={localStyles.mainDesc} xs={12}>
<Typography className={localStyles.secondaryTextColor} variant="h5" component="h2">
{title}
</Typography>
<Typography variant="subtitle2">
{price}
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="body1" className={localStyles.bodyTextColor}>
{desc}
</Typography>
</Grid>
<Grid item className={localStyles.bottomWidgetsBlock} xs={12}>
<Grid item xs={8}>
<Button className={localStyles.button}>
{buttonText}
</Button>
</Grid>
<Grid item className={localStyles.likePlusBlock} xs={4}>
<Fab className={localStyles.bottomWidgetButtons}>
<AddIcon/>
</Fab>
<Fab>
<LikeIcon/>
</Fab>
</Grid>
</Grid>
</Grid>
</>
)
}
解决方案
因此,据我了解,您正在尝试根据将鼠标悬停在父组件上来更改子组件的样式。我看到您已经创建了一个isHover
,并且您将其设置为true
鼠标进入和false
鼠标离开。由于您已经isHover
作为道具传递给子组件,因此您可以在子组件中使用条件,如下所示
let customStyleClasses = "";
if(isHover){
customStyleClasses = "styles-you-wanted-to-define-for-the-child-component"
}
现在您可以将此 customStyleClasses 添加到您的 Grid 组件中,如下所示:
export const OnHoverAboutBlock = ({title, price, desc, type, **isHover**}) => {
.
.
.
return (
<>
<Grid item className={`${localStyles.hoverAboutBlock} ${customStyleClasses }`} xs={12}>
.
.
.
.
);
}
推荐阅读
- javascript - 当用户键入输入栏时通过表格过滤
- python - 我的函数不会从我的字符串列表中读取高低天气数据
- r - 在 R 中进行模糊匹配的更有效方法?
- javascript - 如何在给定 DB FS 的情况下计算 DB SPL
- ruby-on-rails - 如何修复 Rails + Heroku 中未定义的方法错误
- scala - If else 在单个语句中:scala
- kubernetes - 使用 Kubernetes 为 Openfaas 的具有相同命名空间的 pod 设置配额
- java - 尝试更改片段背景时出现 NullPointerException(空对象引用上的 setBackgroundResource)
- java - Mockito.`when`(....) 正在调用实际实现。?
- python - 我在 Python 中导入请求模块时遇到问题