1
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);
純粋なコンポーネントを作成しようとするように、アプリケーションに必要な副作用を含めるために、不要なフープを飛び越しています。あなたの機能コンポーネントを包括的なラップタイムで利用できるようにしてください（サードパーティのライブラリを使用するのではなく） – Pineda
そうする方法があれば疑問に思っていましたそれはこのように。私が言ったように、私はただクラスを使うことができます。しかし、そうしない方法があれば、私はほとんど不思議でした:) –