React-Motion - StaggeredMotion сомнения и проблемы - PullRequest
Новая
       22

React-Motion - StaggeredMotion сомнения и проблемы

0 голосов
/ 23 октября 2018

Я впервые использую реагирующее движение, и у меня возникают проблемы с его работой.Я пытаюсь анимировать список результатов, вводя по одному элементу за раз.Я хочу использовать массив data для генерации списка, но по какой-то причине он не работает.

Что я делаю не так?Заранее спасибо.

Псевдокод

  • Компонент рендеринга
  • Дочерние элементы представлены по одному

Компонент результата 

import * as React from 'react'
import { spring, StaggeredMotion } from 'react-motion'

const data = [
    {
        id: 1,
        label: 'A',
        h: 0,
    },
    {
        id: 2,
        label: 'B',
        h: 0,
    },
    {
        id: 3,
        label: 'C',
        h: 0,
    },
]

const Item = props => {
    return <li>{props.label}</li>
}

export class Results extends React.Component {
    render() {
        return (
            <StaggeredMotion
                defaultStyles={data}
                styles={prevInterpolatedStyles =>
                    prevInterpolatedStyles.map((_, i) => {
                        return i === 0 ? { h: spring(56) } : { h: spring(prevInterpolatedStyles[i - 1].h) }
                    })}
            >
                {interpolatingStyles => {
                    return (
                        <div>
                            {interpolatingStyles.map((style, i) => {
                                return data.map(data => {
                                    return <Item key={i} label={data.label} style={{ border: '1px solid', height: style.h }} /> // This does not work
                                })
                                // return <div key={i} style={{ border: '1px solid', height: style.h }} /> // This works
                            })}
                        </div>
                    )
                }}
            </StaggeredMotion>
        )
    }
}
...