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

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

React + Redux在组件更新后执行某些操作

1 个答案: