如何再次触发StaggerMotion进行react-motion？

Question

我试图通过传递新的道具并再次设置状态来为react-motion重新设置StaggeredMotion的动画。我相信render方法被调用了，但是动画不会再次出现。下面是我编辑过的render()方法：

render() {
    let configs = [];
    Object.keys(this.state.ripples).forEach(key=> {
        configs.push({
            opacity: spring(1, [95, 20]),
            scale: spring(0),
            fill: this.props.style.fill,
            strokeWidth: this.props.style.strokeWidth,
            stroke: this.props.style.stroke,
            transformOrigin: '50% 50%'
        });
    });

    return (
        <StaggeredMotion defaultStyles={configs} styles={prevStyles => prevStyles.map((_, i) => {
        return i === 0 ? {
            opacity: spring(0, [95, 20]),
            scale: spring(1),
            fill: this.props.style.fill,
            strokeWidth: this.props.style.strokeWidth,
            stroke: this.props.style.stroke,
            transformOrigin: '50% 50%'
        } : prevStyles[i - 1]
        })}>
            {interpolatedStyles =>
                <g>
                    {Object.keys(interpolatedStyles).map(key=> {
                        const {...style} = interpolatedStyles[key];
                        return (
                            <circle key={key} {...this.props} style={{
                            transform: `scale(${style.scale})`, opacity: `${style.opacity}`,
                            ...style
                            }}/>
                        )
                    })}
                </g>
            }
        </StaggeredMotion>
    )
}

我已经尝试在componentWillReceiveProps中设置状态，并验证是否收到了将this.state.ripples设置为新数组的新道具，但动画不会再次发生，它只在元素的第一次呈现时发生。

Answer 1

问:你是如何设置状态的？

React文档上写着：Treat this.state as if it were immutable.

每次要更改状态时，都需要使用setState()，而不是直接操作this.state。

从你发布的代码量来看，还不清楚你的组件到底发生了什么，但如果你没有使用setState()，那么你就会想要改变这一点。