velocity-react - scrolling animazione dopo l'aggiornamento del componente

Question

Sto scrivendo una semplice "console" che mostra i messaggi in un modo simile alla chat. Con i messaggi che appaiono dal basso, e salendo.

Ho il codice di lavoro, ma mi piacerebbe animare i messaggi che appaiono facendo scorrere il contenitore verso il basso ogni volta che viene aggiunto un nuovo "li".

codice attuale:

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> 
     ) 
    } 
}) 

Il puntello messages viene dalla componente principale e il negozio.

Ho trovato questo plug-in di velocità: https://github.com/twitter-fabric/velocity-react e non riesco a capire come usarlo nella mia situazione. Tutti gli esempi non sembrano applicarsi (o forse non li capisco proprio).

Sono abbastanza nuovo per reagire, e alcuni concetti ancora mi confondono, quindi per favore sii comprensivo.

Non voglio usare jQuery.

Answer 1

Il plug-in velocity-react fornisce componenti React già implementati per l'utilizzo delle animazioni di Velocity.

Immagino che la funzionalità di scorrimento possa essere implementata anche tramite animazioni, ma la libreria Velocity ha scroll command. Ho riprodotto il plug-in reattore di velocità e fornisce un'interfaccia (componenti) per le animazioni. Non c'è alcun supporto per i comandi Velocity.

È abbastanza facile usare i comandi Velocity in React. Ho creato il repository react-velocity-scroll in base alla tua domanda e c'è una dimostrazione dal vivo di invio/elenco dei messaggi in un modo simile alla chat.

Si prega di notare che la libreria Velocity è inclusa nell'esempio tramite il plugin velocity-react. Si consiglia di includere il plug-in per le animazioni avanzate future, poiché fornisce componenti React già implementati per l'utilizzo delle animazioni di Velocity. Tuttavia il repository non utilizza alcuna animazione. Usa solo il comando di scorrimento della libreria Velocity. Se preferisci, puoi importare la libreria Velocity in modo indipendente.

Tuttavia, ecco i miei componenti. Si prega di concentrarsi sul componente MessageItem - una volta aggiunto un nuovo messaggio, scorrere verso il basso.

App

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; 

MessagesList

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;