reactのDOM構築後に特定の処理を行いたい

1,リスト操作する一番上位のコンポーネント MessageBox
2.リスト全体のコンポーネント MessageList
3.リスト1行のコンポーネント Message
3をループして描画
といった設計で描画しているのですが、

リスト1行のコンポーネントの一番最後まで描画し終わったあとに
特定の処理を実装したいのですが、
どのコンポーネントに処理を書けばよいでしょうか

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
    <div id="content">
    </div>
    <script type="text/jsx">



        var Message = React.createClass({
            render: function() {
                return (
                    <li>
                        <div className="message">
                            <img src={this.props.data.message} alt=""></img>
                        </div>
                    </li>
                );
            }
        });

        var MessageList = React.createClass({
            render: function() {
                var resultNodes = this.props.data.map(function (row) {
                    return (
                        <Message data={row} />
                    );
                });
                return (
                     <ul>
                        {resultNodes}
                     </ul>
                );
            }
        });

        var MessageBox = React.createClass({
            // 初期値を設定します

            getInitialState: function() {
                return {data: [], page: 1, apiUrl: 'http://api.com/get'};
            },

            componentDidMount: function() {
                // ajaxでデータを取得 
                this.requestData();
            },

            render: function() {
                return (
                  <div className="messageBox">
                    <MessageList data={this.state.data} />
                  </div>                                                   
                );
            }
        });

        React.render(
            <MessageBox />,
            document.getElementById('content')
        );
    </script>
</body>
</html>

NatsumiOki

2016/08/08 01:11

描画というのは画面のレンダリングのことでしょうか。それとも都度リストに渡す値がstateなどで変化し、変化した後に処理を行いたいということでしょうか？もう少し具体的に、ソースがあればそれを提示していただけると回答しやすいです。

ricy

2016/08/08 01:51

ありがとうございます。ソースを追記しました。レンダリングのことです。全てのメッセージをレンダリングした最後に処理を行いたい（例えばスクロールを一番下にもっていく）

行動規範の内容に同意します

回答2件

Reactで生成したタグをjQueryから利用するにはrefを使用してください。
コードの記載場所はcomponentDidMountで問題ないです。

https://taylorlovett.com/2015/08/05/modifying-the-dom-with-jquery-within-react-components-in-isomorphic-applications/

投稿2016/08/08 05:29

k.tada

総合スコア1679

ricy

2016/08/08 08:09

＞Reactで生成したタグをjQueryから利用するにはrefを使用ここまでは想定通りうまくいくのですが、 ``componentDidMount ``では、取得できません。一旦レンダリングされないと、``componentDidMount ``状態では、その要素がないと判断されています。その証拠に、レンダリングされたあとに、テスト的にonClickイベントをいれて、 <div onClick={test} >よみこめるかテスト</div> として、 test: : function() { var result = jQuery(ReactDOM.findDOMNode(this.refs.test)) console.log(result) } こんな風にすると、とれます。onclickイベントは明示的にイベントを発生させないといけないので、自動でこのイベントを発生させるようななにかアイデアが必要かもしれません。

ricy

2016/08/08 11:39

タグを取得するには、refを利用して取得できました。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

やるとしたら

componentDidMount()

この中かなと思います。
React.render()自体はあちこちでstateが変わったりするたびに、いつどこで呼び出されるタイミングが来るかわからないので…
ajaxでリストのデータを取得しているのなら.done()とかで完了後に別の関数を呼ぶとか。

【追記】

javascript
1this.requestData();

これがおそらくajaxの処理をしてデータを取得しているところだと思いますが、この中の.done()（successとかで書いてたらそっちでもいいです）でデータを取得しきったあとで処理をしてみてください。
console.log()でリストのhtml()を出力してみるとか。

投稿2016/08/08 02:15

編集2016/08/08 08:27

NatsumiOki

総合スコア1298

ricy

2016/08/08 02:30

MessageBoxコンポーネントにdivタグで囲んでみて、 componentDidMount内で、 $('#MessageBox').animate({scrollTop: $('#MessageBox')[0].scrollHeight}); したところ、undefineになってしまいます、全てrenderされてからでないと#MessageBoxを認識してくれないようです。なにかいい手はないでしょうか