javascript - React + Redux 组件更新后做一些事情

Question

我在使用 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);

Answer 1

您想要的需要使用生命周期方法，我认为没有其他方法可以做到这一点。就我个人而言，我强烈建议您遵循约定。它将允许任何其他开发人员轻松理解您的代码。