Question

我要做什么：为轮播动画制作图像（应在每张图像src更改时从右侧滑动）

为了进行动画处理，我需要在每次更改src的图像上重新安装组件，因此我使用key属性来强制React进行此操作。

正在发生的事情：

当我重新安装一个简单的<img>标签时，它可以工作，但是当我尝试重新安装返回一个<img>标签的样式化组件时，它不起作用。

问题

我如何使选项2起作用？

注意：：react-reveal提供了一个HOC withReveal，我可以使用它来包装我的Styled组件，但是我不想使用它。因为我希望将动画组件<Slide>放在我的Component的返回部分中，以实现更好的代码组织。

// This would work, but it would interfere with my code organization
S.Carousel_IMGREVEAL = withReveal(styled.img`
`,<Slide right/>);

沙箱：https://codesandbox.io/s/64vv42q1j3

导入和样式化的组件

import React, { useState } from 'react';
import styled from 'styled-components';
import Slide from 'react-reveal';

const S = {};

S.Carousel_DIV = styled.div`
  overflow: hidden;
`;

S.Carousel_IMG = styled.img`
`;

ImageCarousel组件：

function ImageCarousel(props) {
  const [selected,setSelected] = useState(0);

  const imageItems = imageProps.map((item,index) =>
    <S.Carousel_IMG key={index} src={item}/>
  );

  function changeImage() {
    setSelected((prevState) =>
      prevState + 1 <= 5 ?
        prevState +1 : 0
    );
  }

  return(
    <S.Carousel_DIV onClick={changeImage}>

      //****************
      //OPTION 1 (WORKS)
      //****************

      <Slide right>
        <img key={selected} src={imageProps[selected]}/>
      </Slide>

      //***********************
      //OPTION 2 (DOESN'T WORK)
      //***********************

      <Slide right>
        <S.Carousel_IMG key={selected} src{imageProps[selected]}/>
      </Slide>

    </S.Carousel_DIV>
  );
}

使用react，样式化的组件和react-reveal

0 个答案: