Closed rickyrauch closed 7 years ago
Hi @rickyrauch
What does gallery.js look like?
Hello @afram
Exactly as your example.
var React = require('react');
var Masonry = require('react-masonry-component');
var masonryOptions = {
transitionDuration: 0
};
var Gallery = React.createClass({
render: function () {
var childElements = this.props.elements.map(function(element){
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Masonry
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={masonryOptions} // default {}
disableImagesLoaded={false} // default false
updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
>
{childElements}
</Masonry>
);
}
});
module.exports = Gallery;
This example expects elements
to be passed into Gallery as a prop. I suspect this is where it's failing for you.
You probably want something more along the lines of:
var Gallery = React.createClass({
render: function () {
return (
<Masonry
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={masonryOptions} // default {}
disableImagesLoaded={false} // default false
updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
>
{ this.props.children }
</Masonry>
);
}
});
Note how I use this.props.children
inside Masonry
@afram Thanks for clarifying,
I still want to use this
<li className="image-element-class">
<img src={element.src} />
</li>
No problem, that's easy done, though in a slightly different way to how you initially had it.
let elements = [
{
src: '/image1.jpg`
},
{
src: '/image2.jpg`
}
];
<Gallery elements={ elements } />
Yes, that's what I did.
I think the best approach would be:
<Gallery>
<ul>
<li className="image-element-class">
<img src={element.src} />
</li>
<li className="image-element-class">
<img src={element.src} />
</li>
<li className="image-element-class">
<img src={element.src} />
</li>
</ul>
</Gallery>
Thanks.
That's really up to you :-)
I would ask the question "Why are images displayed in an unordered list?" - this example was largely to show people the component's flexibility.
Good luck, glad I could help :-)
I'm not saying <ul>
, my example tries to show my own code. Instead of <ul>
could be <div>
. Parent (div
or ul
) and its childs (div
or li
)
No problem.
I'm closing this now as I hope I managed to answer your question.
Please reopen if you need to!
Hello,
I was expecting to use this component like this:
And I'm getting this error