速度反应-在组件更新后为scrollTop设置动画 [英] velocity-react - animating scrollTop after component update

问题描述

我正在编写一个简单的控制台"，以类似聊天的方式显示消息.消息从底部出现，然后向上移动.

I'm writing a simple "console" that shows messages in a chat-like manner. With messages appearing from the bottom, and moving up.

我有工作代码，但是我想通过在每次添加新的"li"时将容器滚动到底部来使出现的消息动起来.

I have the working code, but I'd like to animate the appearing messages by scrolling the container to the bottom each time a new "li" is added.

当前代码:

import React from 'react';
import { render, findDOMNode } from 'react-dom';


export default React.createClass({
    componentDidUpdate : function(){
        var node = findDOMNode(this);
        node.scrollTop = node.scrollHeight;
    },
    render() {
        return (
            <ul id="log">
            {
                this.props.messages.map(function(message, index){
                    return <li key={index}>[{message.time.format('HH:mm:ss')}] {message.action}</li>
                })
            }
            </ul>
        )   
    }
})

messages 道具来自父组件和商店.

The messages prop comes from the parent component and the store.

我找到了这个速度插件: https://github.com/twitter-fabric/velocity-react 而且我不知道如何在我的情况下使用它.所有这些示例似乎都不适用(或者也许我只是不理解它们).

I found this velocity plugin: https://github.com/twitter-fabric/velocity-react and I can't figure out how to use it in my situation. All the examples don't seem to apply (or maybe I just don't understand them).

我现在还很陌生，有些概念仍然让我感到困惑，所以请您谅解.

I'm quite new to react, and some concepts still confuse me, so please be understanding.

我不想使用jQuery.

I don't want to use jQuery.

推荐答案

velocity-react 插件提供了已经实现的React组件，用于使用Velocity的动画.

The velocity-react plugin provides already implemented React components for using Velocity's animations.

我猜想滚动功能也可以通过动画实现，但是Velocity库具有 scroll命令.我已经收到了Velocity-React插件，它为动画提供了界面(组件).对Velocity命令没有任何支持.

I guess that the scroll functionality can be implemented via animations too, but Velocity library has scroll command. I've reveiwed velocity-react plugin and it provides interface (components) for the animations. There isn't any support for the Velocity commands.

在React中使用Velocity命令非常容易.根据您的问题，我已经创建了 react-velocity-scroll 回购是一种以聊天方式发送/列出消息的实时演示.

It's pretty easy to use Velocity commands in React. I've created react-velocity-scroll repo based on your question and there is a live demo of sending/listing messages in a chat-like manner.

请注意，示例中通过Velocity-react插件包含了Velocity库.建议它包括用于将来的高级动画的插件，因为它提供了已实现的React组件以使用Velocity的动画.但是，仓库不使用任何动画.它仅使用Velocity库的scroll命令.如果愿意-您可以独立导入Velocity库.

Please note that the Velocity library is included in the example via velocity-react plugin. Its recommended to include the plugin for future advanced animations, because it provides already implemented React components for using Velocity's animations. However the repo don't use any animations. It uses only Velocity library's scroll command. If you prefer - you can import Velocity library independently.

但是，这是我的组件.请重点关注 MessageItem 组件-添加新消息后，向下滚动至该组件.

However, here are my components. Please focus on MessageItem component - once a new message is being added, then scroll down to it.

应用

import React from 'react';
import MessagesList from './MessagesList';

const style = {
    textAlign: 'center'
};

class App extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            /**
             * @type Array - Store sent messages
             */
            messages: [],
            /**
             * @type String - Store the input value.
             * It's reset on message sent
             */
            text: ''
        }
    }

    handleOnChange(e) {
        const text = e.target.value;
        this.setState({ text });
    }

    handleOnKeyPress(e) {
        const text = e.target.value;

        // Send the message on `Enter` button press
        if (e.key === 'Enter') {
            this.sendMessage(text);
        }
    }

    /**
     * Add the message to the state and reset the value
     * of the input
     *
     * @param String text - Message text
     */
    sendMessage(text) {
        const { messages } =  this.state;
        const message = { date: new Date(), text };

        this.setState({
            messages: messages.concat([message]),
            text: ''
        });
    }

    render() {
        const { messages, text } = this.state;

        return <div style={style}>
            <h1>Please enter your text message:</h1>

            <input
                value={text}
                placeholder="Press Enter for sending"
                onChange={this.handleOnChange.bind(this)}
                onKeyPress={this.handleOnKeyPress.bind(this)} />

            <MessagesList messages={messages} />
        </div>
    }
}

export default App;

邮件列表

import React from 'react';
import MessageItem from './MessageItem';

const style = {
    height: '100px',
    overflowY: 'scroll'
};

const MessagesList = (props) => {
    let { messages } = props;

    messages = messages.map( function(message, index){
        return <MessageItem key={index} index={index} message={message} />
    });

    return <ul style={style}>{messages}</ul>
};

export default MessagesList;

MessageItem

import React from 'react';
import ReactDOM from 'react-dom';
const Velocity = require('../node_modules/velocity-react/lib/velocity-animate-shim');

const style = {
    listStyle: 'none'
};

class MessageItem extends React.Component{
    componentDidMount() {
        const parentNode = ReactDOM.findDOMNode(this).parentNode;
        const node = ReactDOM.findDOMNode(this);

        // Once a new item is being added, then scroll down to it
        Velocity(node, 'scroll', {
            duration: 500,
            container: parentNode,
            queue: false
        });
    }

    render() {
        const { message } = this.props;

        return <li style={style}>{message.date + ' - ' + message.text}</li>
    }
}

export default MessageItem;

这篇关于速度反应-在组件更新后为scrollTop设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！