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

这是一个 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