0

我正在尝试调用 imagesLoaded 函数（在脚本区域中正确导入），但是从组件道具内部调用它时，我收到一个错误，它是未定义的。

我的代码：

    var MasonryContainer = React.createClass({

    imagesLoadedFunc: function() { //omitting the imageloaded call here fix everything
                  this.imagesloaded();
                  this.refs[reference].getDOMNode().imagesLoaded(function() {
                   this.masonry.layout()
                     });

    },
    componentDidMount: function() {
                if (!isBrowser) return;
                this.initializeMasonry();
                this.performLayout();
                this.imagesLoadedFunc();
            },

    componentDidUpdate: function() {
                if (!isBrowser) return;

                this.performLayout();
                this.imagesLoadedFunc(this);
            },

            domChildren: [],

    initializeMasonry: function(force) {
        if (!this.masonry || force) {
            this.masonry = new Masonry(this.refs[reference].getDOMNode(), options);
            this.domChildren = this.getNewDomChildren();
        }
    },

    getNewDomChildren: function () {
        var node = this.refs[reference].getDOMNode();
        var children = options.itemSelector ? node.querySelectorAll(options.itemSelector) : node.children;

        return Array.prototype.slice.call(children);
    },

    diffDomChildren: function() {
        var oldChildren = this.domChildren;
        var newChildren = this.getNewDomChildren();
        var removed = oldChildren.filter(function(oldChild) {
            return !~newChildren.indexOf(oldChild);
        });

        var added = newChildren.filter(function(newChild) {
            return !~oldChildren.indexOf(newChild);
        });

        var moved = [];

        if (removed.length === 0) {
            moved = oldChildren.filter(function(child, index) {
                return index !== newChildren.indexOf(child);
            });
        }
        this.domChildren = newChildren;
        return {
            old: oldChildren,
            'new': newChildren, // fix for ie8
            removed: removed,
            added: added,
            moved: moved
        };
    },

    performLayout: function() {
        var diff = this.diffDomChildren();

        if (diff.removed.length > 0) {
            this.masonry.remove(diff.removed);
            this.masonry.reloadItems();
        }

        if (diff.added.length > 0) {
            this.masonry.appended(diff.added);
        }

        if (diff.moved.length > 0) {
            this.masonry.reloadItems();
        }

        this.masonry.layout();
    },


    componentWillReceiveProps: function() {
        setTimeout(function() {
            this.masonry.reloadItems();
            this.forceUpdate();
        }.bind(this), 0);
    },

    render: function () {
        return (
            <div className="content" ref="masonryContainer">
                <div className='Item'>
                    <img src="/img/gallery/3.jpg"></img>
                </div>
                <div className='Item'>
                    <img src="/img/gallery/11.jpg"></img>
                </div>
                <div className='Item'>
                    <img src="/img/gallery/12.jpg"></img>
                </div>
                <div className='Item'>
                    <img src="/img/gallery/12.jpg"></img>
                </div>
                <img src="/img/gallery/4.jpg"></img>
                <img src="/img/gallery/5.jpg"></img>
                <img src="/img/gallery/6.jpg"></img>
                <img src="/img/gallery/7.jpg"></img>
                <img src="/img/gallery/8.jpg"></img>
                <img src="/img/gallery/9.jpg"></img>
            </div>
        );
    }
});
    React.render(
    <MasonryContainer/>, document.getElementById('reactbody')
    )
</script>

如果我在反应组件之外调用 imageloaded 构造函数，它就可以工作。我错过了什么？

4

1 回答 1

1

您使用此加载的调用图像，

this.imagesloaded();

然而，imagesloaded 不是你的组件的一部分，也不是 React 的标准。因此， this.imagesloaded 是未定义的，因为它从未被声明过。尝试删除语句的“this”部分。

 imagesLoadedFunc: function() {
     imagesloaded();
     //the rest of the method
 },
于 2015-03-27T22:04:34.853 回答