在我的react
应用程序中,当react-spring
更改时,我试图使用src
淡入图像。我在/img/
目录中有多个图像,它们的名称与我要显示的当前activeIndex
相匹配。当前使用下面的代码,淡入效果仅应用于第一张图像。我在做什么错了?
import React from 'react';
import { Spring } from 'react-spring/renderprops';
export default function MyComponent(props) {
const {
activeIndex
} = props;
return (
<div>
<Image activeIndex={activeIndex} />
</div>
)
}
function Image(props) {
const {
activeIndex
} = props;
return (
<Spring
from={{opacity: 0}}
to={{opacity: 1}}
>
{ props => (
<div style={props}>
<div>
<img src={ `/img/${activeIndex}/01.jpg` } alt="" />
</div>
</div>
)}
</Spring>
)
}
答案 0 :(得分:1)
如果只希望淡入效果,请确保每个图像都有不同的键。在这种情况下,react将重复初始效果。
return (
<div>
<Image key={activeIndex} activeIndex={activeIndex} />
</div>
)
如果您还想要淡出效果。我会尝试使用Transition组件而不是Spring组件。