React 钩子使用带有样式化组件的状态事件处理程序

Question

我有一个父div ImgClust1，在单击时，我希望其中的样式组件可以根据状态更改一些样式。基本上，按照当前的结构，将鼠标悬停在TopLine，RightLine，LeftLine和BotLine组件上会转换并基本上显示。我正在寻找一种使用状态的方法，以便 onClick，那些组件的高度/宽度样式取决于组件根据状态进行调整。主要家庭组件结构如下：

首页.js：

import React, { useState } from 'react';
import Container from './Container';
import Box1 from './boxes/Box1';
import ImgClust1 from './imgClust/ImgClust1';
import TopLine from './imgHovers/TopLine';
import BotLine from './imgHovers/BotLine';
import LeftLine from './imgHovers/LeftLine';
import RightLine from './imgHovers/RightLine';
const Home = () => {
const [fill, setFill] = useState(false);
return (
<Container>
<ImgClust1 onClick={() => setFill(!fill)}>
<Box1>
<img src= {img}/>
<TopLine />
<RightLine />
<LeftLine />
<BotLine />
</Box1>
</ImgClust1>
</Container>
)
}
export default Home;

ImgClust1.js：

import styled from 'styled-components';
const ImgClust1 = styled.div`
display: inline-block;
width: 41.667vw;
top: 16.667vw;
position: relative;
`;
export default ImgClust1;

框注1.js

import styled from 'styled-components';
const Box1 = styled.div`
position: relative;
height: auto;
cursor: pointer;
transition: 0.4s ease-in;
overflow: hidden;
display: block;
width: inherit;
:hover img {
transform: matrix(1.1, 0, 0, 1.1, 0, 0);
}
:hover {
z-index: 100 !important;
}
:hover div:nth-child(2) {
transform: matrix(1,0,0,1,0,0);
height: 30px;
}
:hover div:nth-child(3) {
transform: matrix(1,0,0,1,0,0);
width: 30px;
}
:hover div:nth-child(4) {
transform: matrix(1,0,0,1,0,0);
width: 30px;
}
:hover div:nth-child(5) {
transform: matrix(1,0,0,1,0,0);
height: 30px;
}
& img {
position: relative;
display: inline-block;
width: 100%;
height: auto;  
z-index: -10;
transition: 0.35s ease-in-out;
transform: matrix(1, 0, 0, 1, 0, 0);
:hover {
transform: matrix(1.1, 0, 0, 1.1, 0, 0);
}
}
`;
export default Box1;

顶线.js

import styled from 'styled-components';
import fill from '../Home';
const TopLine = styled.div`
display: block;
position: absolute;
background-color: red;
transition: 0.35s ease-in;
transform: matrix(1,0,0,0,0,0);
top: 0;
transform-origin: top;
left: 0;
margin-top: -1px;
width: 100%;
height: ${fill ? '100%' : '1px'};
`;
export default TopLine;

我以为我的 useState 方法会达到我正在寻找的预期结果，但现在单击时没有任何反应。我不确定我的状态是否因为样式化组件的嵌套方式而出现问题，或者它是否与我希望实现样式更改的 TopLine 组件中的语法有关。任何帮助将不胜感激！对于上下文，我将在像这个网站这样的任何图像上进行单击动画：https://www.fabianfallend.com/基本上我现在已经悬停了，但是正在寻找正确的方法来启动onClick动画，以便不仅单击的div被填充，而且其他div也会在页面上填充。

Answer 1

您需要将状态传递给样式化的组件：

<ImgClust1 onClick={() => setFill(!fill)}>
...
<TopLine fill={fill} />
<RightLine fill={fill} />
...
</ImgClust1>

然后fill将作为样式组件的道具提供，它可以像这样使用：

const TopLine = styled.div`
...
height: ${p => p.fill ? '100%' : '1px'};
`;

或：

const Box1 = styled.div`
...
${(p) =>
p.fill
? " "
: `
:hover img {
transform: matrix(1.1, 0, 0, 1.1, 0, 0);
}
`}
`;

根据道具调整样式组件