Question

我正在尝试使用react-motion在我的React + Redux应用中添加新评论。

class Comments extends Component {
    getDefaultStyles() {
        const { comments } = this.props;
        return comments.map((c, i) => {
            return {
                key: "" + i,
                style: { top: -50, opacity: 0.2 },
                data: c
            }
        });
    }
    getStyles() {
        const { comments } = this.props;
        return comments.map((c, i) => {
            return {
                key: "" + i,
                style: {
                    top: spring(0, presets.gentle),
          opacity: spring(1, presets.gentle)
                },
                data: c
            }
        })
    }
    willEnter() {
        return { top: -50, opacity: 0.2 }
    }
    render() {
        let { comments } = this.props;
        return (
            <div>
                <TransitionMotion defaultStyles={this.getDefaultStyles()} styles={this.getStyles()} willEnter={this.willEnter}>
                {styles =>
                    <div>
                    {
                        styles.map((c) => {
                            return (
                                <Comment key={c.key} comment={c.data} style={{...c.style, overflow: 'hidden'}} />
                            )
                        })
                    }
                    </div>
                }
                </TransitionMotion>
            </div>
        )
    }
}

然后将样式传递给Comment组件中的第一个div。

加载评论时，动画就可以了。但是用户添加注释，然后调用fetchComments方法来获取所有注释，动画不会发生。这与redux有关吗？我正在使用mapStateToProps和connect传递我的评论。

Answer 1

问题在于密钥。动画正在发生，但在注释的底部，通过它们的映射为它们分配了一个基于数组中的索引的键。当我更改密钥以包含Install-Package : Could not find file 'C:\Users\Josh\.nuget\packages\websocket4net\0.14.1\websocket4net.0.14.1.nupkg'. At line:1 char:1 + Install-Package Discord.Net + ~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : NotSpecified: (:) [Install-Package], Exception + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PackageManagement.PowerShellCmdlets.InstallPackageCommand数字时，它开始正常工作！

与redux反应运动

1 个答案: