Javascript 反应：当悬停父组件时，如何触发在子组件内更改样式的函数

最近，我制作了一个名为ItemsPageItem的项目组件，其中有两个其他组件，一个名为OnHoverAboutBlock的组件应该会更改内部网格的一些样式。我用道具为我正在传递的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>
        </>
    );

导出默认函数ItemsPageItemContent（{serialNum，title，price，shortDescription，type}）{
const localStyles=useStyles（）；
const[isHover，setIsHover]=useState（false）；
函数集合（e）{
e、 target.style.position=“绝对”；
e、 target.style.overflow=“可见”；
e、 target.style.height=350；
}
函数onLeave（e）{
e、 target.style.position=“relative”；
e、 target.style.overflow=“隐藏”；
e、 target.style.height=135；
}
返回(
setIsHover（true）}`}onMouseLeave={`${（）=>setIsHover（false）}}}className={localStyles.itemBoxContainer}>
);

问题是如何触发子级内部的函数onneter-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>
    </>
)

export const OnHoverAboutBlock=（{title，price，desc，type，**isHover**}）=>{
const localStyles=useStyles（）；
let buttonText=“投标”；
开关（类型）{
案例“产品”：
buttonText=“立即购买”；
打破
“捐赠”一案：
buttonText=“捐款”；
打破
违约：
打破
}
返回(
{title}
{price}
{desc}
{buttonText}
)

---

}

因此，据我所知，您正试图通过将鼠标悬停在父组件上来更改子组件的样式。我看到您已经创建了一个

isHover

，并且在鼠标进入时将其设置为

true

，在鼠标离开时将其设置为

false

。由于您已经将

isHover

作为道具传递给子组件，因此可以在子组件中使用一个条件，如下所示

let customStyleClasses = "";
if(isHover){
  customStyleClasses = "styles-you-wanted-to-define-for-the-child-component"
}

现在，您可以将此CustomStyleClass添加到网格组件中，如下所示：

export const OnHoverAboutBlock = ({title, price, desc, type, **isHover**}) => {
  .
  .
  .
  return (
    <>
      <Grid item className={`${localStyles.hoverAboutBlock} ${customStyleClasses }`} xs={12}>
    .
    .
    .
    .
    );

}

export const OnHoverAboutBlock=（{title，price，desc，type，**isHover**}）=>{
.
.
.
返回(
.
.
.
.
);
}

OnHoverAboutBlock中的网格组件是否是要应用样式的组件？是的，OnHoverAboutBlock中的第一个组件是localStyles。HoverAboutBlock我确信上述解决方案在您的情况下会起作用。如果可能的话，试着将代码粘贴到codepen.io上，并在这里共享链接，这样我就可以看一看了。哈哈，它确实起作用了。非常感谢！！！！！