Javascript 反应弹簧：内部轨迹使用过渡贴图不工作

我是一个新手，试图在我的React（16.8）项目中使用React-Spring。我制作了一个小转盘，它可以工作，但我想在每张幻灯片的底部添加一个信用卡，它应该交错在一起。一个积分由两个项目组成，第二个应该比第一个慢一点

为此，我想使用，但当轨迹的内容渲染时，动画不会触发

这是我目前的代码：

const幻灯片=[
{
id:0，
桌面映像：“http://lorempixel.com/400/200/",
标题：“富”，
工作室：“酒吧”
},
{
id:1，
桌面映像：“http://lorempixel.com/400/200/",
标题：“富”，
工作室：“酒吧”
},
{
id:2，
桌面映像：“http://lorempixel.com/400/200/",
标题：“富”，
工作室：“酒吧”
}
];
const[slideIndex，set]=useState（0）；
使用效果(
() =>
void setInterval（（）=>set（state=>（state+1）%slides.length），4000），
[]
);
const transitions=useTransition（幻灯片[slideIndex]，item=>item.id{
from:{opacity:0，left:-10}，
输入：{opacity:1，left:-100}，
左：{不透明度：1，左：-100}，
配置：{摩擦：25，持续时间：4000}
});
返回(
{transitions.map（{item，props，key}）=>{
设bgImg=item.desktopImage；
const creditArray=[item.title，item.studio]；
返回(
{
{item=>props=>{item}
}
);
})}
);弄明白了，我忘了将实际样式向下传递到渲染元素

因此，不是：

<Trail
   key={key}
   items={creditArray}
   keys={key}
   from={{ opacity: 0, transform: "translate3d(-100, 0, 0)" }}
   to={{ opacity: 1, transform: "translate3d(0, 0, 0)" }}>
        {item => props => <div className="h4">{item}</div>}
</Trail>


{item=>props=>{item}

我需要做：

<Trail
   items={creditArray}
   keys={item => item + key}
   from={{opacity: 0, transform: 'translateX(100px)'}}
   to={{opacity: 1, transform: 'translateX(0)'}}>
        {item => style => (
               <animated.div style={{ ...style }} className="h4">
                    {item}
              </animated.div>
       )}
</Trail>

item+key}
from={opacity:0，transform:'translateX（100px）'）}
to={{opacity:1，transform:'translateX（0）}}>
{item=>style=>(
{item}
)}
算出了，我忘了将实际样式向下传递到渲染元素

因此，不是：

<Trail
   key={key}
   items={creditArray}
   keys={key}
   from={{ opacity: 0, transform: "translate3d(-100, 0, 0)" }}
   to={{ opacity: 1, transform: "translate3d(0, 0, 0)" }}>
        {item => props => <div className="h4">{item}</div>}
</Trail>


{item=>props=>{item}

我需要做：

<Trail
   items={creditArray}
   keys={item => item + key}
   from={{opacity: 0, transform: 'translateX(100px)'}}
   to={{opacity: 1, transform: 'translateX(0)'}}>
        {item => style => (
               <animated.div style={{ ...style }} className="h4">
                    {item}
              </animated.div>
       )}
</Trail>

item+key}
from={opacity:0，transform:'translateX（100px）'）}
to={{opacity:1，transform:'translateX（0）}}>
{item=>style=>(
{item}
)}