我正在写一个简单的"控制台",以聊天方式显示消息.消息从底部出现,然后向上移动.
我有工作代码,但是每次添加新的"li"时,我都想通过将容器滚动到底部来设置显示消息的动画.
当前代码:
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>
)
}
})
Run Code Online (Sandbox Code Playgroud)
该messages
道具来自父组件和商店.
我发现这个速度插件:https://github.com/twitter-fabric/velocity-react我无法弄清楚如何在我的情况下使用它.所有的例子似乎都不适用(或者我只是不理解它们).
我很反应,一些概念仍然让我困惑,所以请理解.
我不想使用jQuery.