reactjs 和砌体布局 - 未定义

Question

我已经在 masonry-layout 上安装了 npm —— 但是当我渲染这个组件时，它会出现一个元素未定义的错误？ “无法设置未定义的属性‘元素’”

这是一个 jsfiddle

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

我是 reactjs 新手，我正在尝试让砌体布局网格正常工作。 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

Answer 1

根据文档，

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
});