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在组件更新后执行某些操作

回答

相关问题