Hız-tepki - hareketli kaydırma Bileşen güncellemesinden sonra güncelleme

Question

Mesajları sohbet benzeri bir şekilde gösteren basit bir "konsol" yazıyorum. Alttan görünen mesajlar ve yukarı doğru ilerliyor.

Çalışma kodum var, ancak yeni bir "li" eklendiğinde kapsayıcıyı aşağıya kaydırarak görünen iletileri canlandırmak istiyorum.

Güncel kodu:

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 prop ebeveyn bileşeni ve mağaza geliyor.

Bu hız eklentisini buldum: https://github.com/twitter-fabric/velocity-react ve durumumda nasıl kullanılacağını anlayamıyorum. Tüm örnekler geçerli görünmüyor (ya da belki sadece onları anlamıyorum).

Ben tepki vermek için oldukça yeni ve bazı kavramlar hala beni şaşırtıyor, lütfen anlayın.

jQuery'yi kullanmak istemiyorum.

Answer 1

velocity-react eklentisi, Velocity'nin animasyonlarını kullanmak için halihazırda uygulanan React bileşenleri sağlar.

Kaydırma işlevselliğinin animasyonlar yoluyla da gerçekleştirilebileceğini tahmin ediyorum, ancak Velocity kitaplığı scroll command. Hızla tepki veren eklentiyi yeniden oluşturdum ve animasyonlar için arayüz (bileşenler) sağlıyor. Velocity komutları için herhangi bir destek yoktur.

React'ta Velocity komutlarını kullanmak oldukça kolaydır. Sorunuza bağlı olarak react-velocity-scroll repo oluşturdum ve sohbet benzeri bir şekilde mesaj gönderme/listeleme konusunda canlı bir demo var.

Lütfen Velocity kütüphanesinin hız-tepki eklentisi ile örnekte yer aldığını unutmayın. Velocity'nin animasyonlarını kullanmak için halihazırda uygulanan React bileşenlerini sunduğu için gelecekteki gelişmiş animasyonlar için eklentiyi eklemesi önerilir. Ancak, repo herhangi bir animasyon kullanmaz. Sadece Velocity kütüphanesinin kaydırma komutunu kullanır. İsterseniz - Velocity kütüphanesini bağımsız olarak içe aktarabilirsiniz. Bununla birlikte, işte benim bileşenlerimdir. Lütfen MessageItem bileşenine odaklanın - yeni bir mesaj eklendikten sonra aşağı kaydırın.

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;