reactjs和砌体布局-未定义 | reactjs和砌体布局

本文介绍了reactjs和砌体布局-未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经在砌体布局上完成了npm安装-但是当我渲染此组件时，它会出现一个元素未定义的错误?无法设置未定义的属性'element'"

I have done an npm install on masonry-layout -- but when I render this component it comes up with an element undefined error? "Cannot set property 'element' of undefined"

这是一个jsfiddle

here is a jsfiddle

http://jsfiddle.net/0ht35rpb/82/

我是reactjs的新手，我正在尝试使砌体布局网格正常工作. https://masonry.desandro.com/#package-managers

I am new to reactjs and I am trying to get the masonry layout grid to work.https://masonry.desandro.com/#package-managers

import React from 'react'
// import $ from 'jquery'

import Masonry from 'masonry-layout'

class VideoGrid extends React.Component {
  componentDidMount () {
    this.invokeMasonry()
  }

  invokeMasonry () {
    var elem = document.querySelector('.grid')
    Masonry(elem, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    })
  }

  render () {
    return (
      <div className='grid'>
        <div className='grid-sizer width2' />
        <div className='grid-item width2'>
          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg' />
        </div>
        <div className='grid-item width2'>
          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg' />
        </div>
      </div>
    )
  }
}

export default VideoGrid

推荐答案

根据文档，

var elem = document.querySelector('.grid')
    Masonry(elem, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    })

应该是:

 var elem = document.querySelector('.grid')
var msnry = new Masonry( elem, {
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          percentPosition: true
});

这篇关于reactjs和砌体布局-未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！