Question

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

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

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

<div class="container">    
        <table>
            <tbody>
                <?php for ($i = 0; $i < count($optArr); $i++): ?>
                    <div class="col-md-2">
                        <td style="width: 7em">
                            <?php if ($mn == $i):?>
                                <b><?= $optArr[$i] ?></b>
                            <?php else: ?>
                                <a href="index.php?mn=<?= $i ?>">
                                    <?= $optArr[$i] ?>
                                </a>
                            <?php endif; ?>
                        </td>  
                    </div>
                <?php endfor; ?>
            </tbody>
    </table>
</div>

然后<ImgClust1 onClick={() => setFill(!fill)}> ... <TopLine fill={fill} /> <RightLine fill={fill} /> ... </ImgClust1>将作为样式组件的道具，并且可以这样使用：

fill

或：

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

Adapting styled components based on props

具有样式组件的React Hooks useState事件处理程序

1 个答案: