velocity-react - 在组件更新后动画 scrollTop
velocity-react - animating scrollTop after component update
我正在编写一个简单的 "console",它以类似聊天的方式显示消息。消息从底部出现,并向上移动。
我有工作代码,但我想通过每次添加新 "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>
)
}
})
messages
道具来自父组件和商店。
我找到了这个速度插件:https://github.com/twitter-fabric/velocity-react,但我不知道如何在我的情况下使用它。所有示例似乎都不适用(或者我只是不理解它们)。
我是react新手,有些概念还是比较糊涂,还望谅解。
我不想使用 jQuery。
velocity-react 插件提供已实现的 React 组件以使用 Velocity 的动画。
我想滚动功能也可以通过动画实现,但是 Velocity 库有 scroll command。我已经审查了 velocity-react 插件,它为动画提供了界面(组件)。不支持 Velocity 命令。
在 React 中使用 Velocity 命令非常简单。
我已经根据你的问题创建了 react-velocity-scroll 存储库,并且有一个 sending/listing 消息的现场演示 chat-like 方式。
请注意 Velocity 库通过 velocity-react 插件包含在示例中。建议包含用于未来高级动画的插件,因为它提供了已经实现的 React 组件以使用 Velocity 的动画。但是回购不使用任何动画。它仅使用 Velocity 库的滚动命令。如果您愿意,您可以独立导入 Velocity 库。
但是,这是我的组件。请关注 MessageItem 组件 - 添加新消息后,向下滚动到它。
应用程序
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;
我正在编写一个简单的 "console",它以类似聊天的方式显示消息。消息从底部出现,并向上移动。
我有工作代码,但我想通过每次添加新 "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>
)
}
})
messages
道具来自父组件和商店。
我找到了这个速度插件:https://github.com/twitter-fabric/velocity-react,但我不知道如何在我的情况下使用它。所有示例似乎都不适用(或者我只是不理解它们)。
我是react新手,有些概念还是比较糊涂,还望谅解。
我不想使用 jQuery。
velocity-react 插件提供已实现的 React 组件以使用 Velocity 的动画。
我想滚动功能也可以通过动画实现,但是 Velocity 库有 scroll command。我已经审查了 velocity-react 插件,它为动画提供了界面(组件)。不支持 Velocity 命令。
在 React 中使用 Velocity 命令非常简单。 我已经根据你的问题创建了 react-velocity-scroll 存储库,并且有一个 sending/listing 消息的现场演示 chat-like 方式。
请注意 Velocity 库通过 velocity-react 插件包含在示例中。建议包含用于未来高级动画的插件,因为它提供了已经实现的 React 组件以使用 Velocity 的动画。但是回购不使用任何动画。它仅使用 Velocity 库的滚动命令。如果您愿意,您可以独立导入 Velocity 库。
但是,这是我的组件。请关注 MessageItem 组件 - 添加新消息后,向下滚动到它。
应用程序
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;