React + Redux在組件更新後執行某些操作

我在使用React和Redux時遇到了一些問題。那麼我知道如何解決它，但我不確定它是否是最好的解決方案。我正在創建一個基本的聊天應用程序，每當我添加一個消息時，該框應該滾動到底部。React + Redux在組件更新後執行某些操作

所以我基本上要問的是，有一種方法可以在redux更新更新組件後運行一個函數嗎？我知道我應該能夠在componentDidUpdate中看到這個，但我覺得有一個更好的解決方案。我想保留我的組件作爲純粹的功能。

我試過從mapStateToProps開始調用它，但是在更新實際組件之前。

現在我已經與react-functional合作。但是，這使得組件不再那麼純淨。

ChatBox.js

import React, {PropTypes} from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import functional from 'react-functional'; 

import Message from './Message'; 

const MessageBox = ({messages}) => (
    <section className='chatbox'> 
    <ReactCSSTransitionGroup transitionName='bubble' transitionEnterTimeout={700} transitionLeaveTimeout={700}> 
     {messages.map(message => 
     <Message 
      key={message.id} 
      {...message} 
     /> 
    )} 
    </ReactCSSTransitionGroup> 
    </section> 
); 

const options = { 
    componentDidUpdate:() => { 
    const chatbox = document.querySelector(`.chatbox`); 
    if (chatbox) { 
     const scroll = chatbox.scrollHeight - chatbox.clientHeight; 
     document.querySelector(`.chatbox`).scrollTop = scroll; 
    } 
    } 
}; 

MessageBox.propTypes = { 
    messages: PropTypes.arrayOf(PropTypes.shape({ 
    id: PropTypes.number.isRequired, 
    user: PropTypes.string.isRequired, 
    image: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
    }).isRequired).isRequired 
}; 


export default functional(MessageBox, options);

來源

2017-01-26 Jannes V

似乎在您嘗試創建純組件時，您會跳過不必要的箍環以包含應用程序中必需的副作用。爲什麼不把你的功能組件包裝在一個普通的組件中，在那裏你可以使用現成的生命週期方法（而不是使用第三方庫） – Pineda

是的，我只是想知道是否有任何方法可以做它以這種方式。就像我說過的，我知道我可以只用一堂課。但我主要是好奇，如果有辦法不這樣做:) –

你想要什麼需要使用的生命週期方法，我覺得那樣做有沒有其他辦法。個人而言，我強烈建議您遵循這些慣例。它允許任何其他開發人員輕鬆理解您的代碼。

來源

2017-01-26 16:01:20

React + Redux在組件更新後執行某些操作

回答

相關問題