reactjsと石積みのレイアウト - 未定義

Question

masonry-layoutにnpmをインストールしましたが、このコンポーネントをレンダリングすると要素の定義されていないエラーが発生しますか？

を「未定義のプロパティ 『要素』を設定することはできません」ここで私はreactjsに新しいですし、私は仕事に石工レイアウトグリッドを取得しようとしていますjsfiddle

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

です。ドキュメントあたりとして 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 
});