React JS-在將數據放入DOM之后調用函數

Question

一旦將數據填充到DOM中，我希望調用函數“ activateGrid（）”。 我知道這並不理想，但是除了使用特定的jquery插件外，我別無選擇。

我的問題是，我不知道如何調用“ activateGrid（）”，以便所有交互都就位。

我需要使用特定的生命周期方法嗎？ DOM填充后的情況？

這是代碼：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Header from '../components/header';
import { fetchPosts } from '../actions/index';
import { Link } from 'react-router';

class Dashboards extends Component {

  componentDidMount()
  {
    this.activateGrid();
  }

 componentDidUpdate()
 {
    this.activateGrid();
  }

  componentWillMount()
  {
    this.props.fetchPosts();

    this.addWidgetHandler = this.addWidgetHandler.bind(this);
    this.editDashboardHandler = this.editDashboardHandler.bind(this);
  }

        getItemNormalElement()
        {
          var $item = $('<div class="grid-item normal"><div class="title">UK Desk Occupancy</div><div class="image">New item</div></div>');

          return $item;
        }


        addWidgetHandler()
        {




            /* Add in new normal item START */
            var $items = this.getItemNormalElement();
              // append elements to container
              $('#grid').append( $items )
                // add and lay out newly appended elements
                .packery( 'appended', $items ).find($items).draggable();

                $('#grid').packery('bindUIDraggableEvents', $items);
            /* Add in new normal item END */





        }


        editDashboardHandler()
        {

        }






      draggingItem()
      {
          console.log("dragging in progress");

      }


      sortGrid()
      {
          console.log("complete");
          console.log(this);

          $('#grid').packery();

          /* Reload it a second time incase something disappears START */
          setTimeout(function(){ $('#grid').packery(); }, 3000);
          /* Reload it a second time incase something disappears END */

      }



      activateGrid()
      {



                     var $grid = $('#grid').packery({
                        itemSelector: '.grid-item',
                        gutter: 20,
                        columnWidth: 257
                    });
                    var $items = $grid.find('.grid-item.normal').draggable();
                    $grid.packery('bindUIDraggableEvents', $items);

                    $grid.on( 'layoutComplete', this.draggingItem );
                    $grid.on( 'dragItemPositioned', this.sortGrid );




      }





renderPosts() {
    return this.props.posts.map((post,i) => {
    console.log(post);
      return (

                        <div className="grid-item normal" key={i}>
                            <div className="title">{post.type}</div>
                            <div className="image">{post.name}</div>
                          </div>



      );
    }
    );




  }





  render() {
    return (
        <div>
        <Header />

            <div className="contentContainer">


                <div className="dashboardOptions">
                    <div className="option addWidget" onClick={this.addWidgetHandler}>Widget</div>
                    <div className="option editDashboard" onClick={this.editDashboardHandler}>Edit Dashboard</div>
                </div>

                <div className="mainSectionHeading">Create new report</div>







                        <hr />


                        <div className="grid" ref="gridContainer" id="grid">
                            {this.renderPosts()}
                        </div>

                        <hr />

            </div>


          </div>








    );
  }
}



function mapStateToProps(state) {
  return { posts: state.posts.all};
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({ 
                              fetchPosts
                              }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboards);

Answer 1

第一次有兩個函數componentDidMount和下次是componentDidUpdate 。