React Hooks useState 事件处理程序与样式化组件

Question

我有一个父 div ImgClust1 onClick 我希望它里面的样式组件根据状态更改一些样式。基本上，就当前结构而言，在悬停时，TopLine、RightLine、LeftLine 和 BotLine 组件会转换并基本显示。我正在寻找一种使用状态的方法，以便 onClick，那些组件 height/width 样式取决于组件根据状态进行调整。主要的家庭组件结构如下：

Home.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;

Box1.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;

TopLines.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 方法会达到我正在寻找的预期结果，但现在 onClick 没有任何反应。我不确定我的状态是否因为样式组件的嵌套方式而成为问题，或者它是否与我希望实现样式更改的 TopLine 组件中的语法有关。任何帮助是极大的赞赏！对于上下文，我打算在任何图像上制作点击动画，例如此网站：https://www.fabianfallend.com/ 所以基本上我现在已经像它一样悬停了，但我正在寻找启动 onClick 动画的正确方法，这样就不会只有单击的 div 会被填充，但页面上的其他 div 也会被填充。

Answer 1

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

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

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

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);
      }
   `}
`;

Adapting styled components based on props

React Hooks useState 事件处理程序与样式化组件

React Hooks useState Event Handler With Styled Components

state

reactjs

styled-components

react-hooks