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

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（模式）显示时，它不起作用。

我认为，问题可能是因为当我的组件（也是自举模式）重新渲染时，对AdobeEdge组成内的DOM元素的引用导致了另一个DOM元素，而这在实际DOM中并不存在。 我试图更改对实际DOM元素的引用，但仍然无法正常工作。

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

Answer 1

您是否尝试过在composition.getStage().play()之前调用composition.ready() composition.getStage().play() ？ 我拥有与您几乎相同的代码，但是ready()重新创建了舞台。