我已经在 masonry-layout 上完成了 npm 安装——但是当我渲染这个组件时,它出现了一个元素未定义的错误? “无法设置未定义的属性‘元素’”
这是一个jsfiddle
http://jsfiddle.net/0ht35rpb/82/ http://jsfiddle.net/0ht35rpb/82/
我是 ReactJS 的新手,我正在尝试让砌体布局网格正常工作。https://masonry.desandro.com/#package-managers 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
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)