如何使用Masonry.js和React.js？

Question

我试图在react.js中集成masonry.js，而且我遇到了设计问题。

我是否应该在一个根反应组件中拥有所有砌块，就像它在react-masonry-component

中完成的一样

<RootComponent>
    this.props.elements.map(function(element){
           return (
                <li className="image-element-class">
                    <img src={element.src} />
                </li>
            );
        });
<RootComponent>

或者我应该将每个砌块作为新的React组件作为根反应组件的子组件吗？

<RootComponent>
    this.props.elements.map(function(element){
           return (
                <ChildComponent props={element}>
            );
        });
<RootComponent>

Answer 1

如果你想总是使用砖石，

react-masonry-component是好的，但如果你想根据某些条件初始化砖石，你可以这样做：

例如，您获取一些项目，然后初始化砌体：

componentWillMount() {
    this.props.fetchItems();
}

componentDidUpdate(prevProps) {
    const {
        items
    } = this.props;

    if (this.state.masonry && prevProps.items !== items) { // reinitialize if items change
        $('.list').masonry('destroy');

        this.setState({
            masonry: false
        });
    }

    if (someCondition && items.length && !this.state.masonry) {
        $('.list').masonry({
            itemSelector: '.list__item'
        });

        this.setState({
            masonry: true
        });
    }
}

你的渲染可能看起来像这样

render() {
const {
    items
} = this.props;
return (
    <div className="list">
        {items.map(item =>
            <div className="list__item" key={item.id} >
                {item.title}
            </div>
        )}
    </div>
);

}