Question

我有AdobeEdge，我需要将它包装在React.js组件中。

组件代码：

let ModalWithAnimation = React.createClass({
    render() {
        return (
            <div className="modal-dialog timeslot-modal rc5">
                <div className="modal-content light-grey">
                    <div className="modal-body">
                        <div ref='stage' id="Stage" className="EDGE-18968668">
                        </div>
                    </div>
                </div>
            </div>
        );
    },
    componentDidMount() {
        const compId = 'EDGE-18968668';
        let composition = AdobeEdge.getComposition(compId);
        if (composition) {
            composition.getStage().play();
            return;
        }
        AdobeEdge.loadComposition('/static/animations/rsvp/progress', compId, {
            scaleToFit: "none",
            centerStage: "none",
            minW: "0px",
            maxW: "undefined",
            width: "70px",
            height: "70px"
        }, {
            dom: [ ]
        }, {
            dom: [ ]
        });
    }
});

所以，如你所见，在componentDidMount方法中，我试图通过id找到组合并播放它。如果我找不到合成，它将通过AdobeEdge.loadComposition方法加载。

第一次正确加载。但是当React-component（模态）第二次显示时，它不起作用。

我认为，问题可能是因为当我的组件（也是bootstrap-modal）重新渲染时，对AdobeEdge组合内部的DOM元素的引用导致另一个DOM元素，而不是实际的DOM。我试图改变对实际DOM元素的引用，但它仍然不起作用。

在这种情况下我该怎么做？

Answer 1

您是否尝试在composition.ready()之前致电composition.getStage().play()？我有与你相同的代码，但ready()重新创建了舞台。

将AdobeEdge动画包装到React.js组件

1 个答案: