将精灵传递到置换过滤器的正确方法是什么

Question

我正试图在React应用程序中使用PixiJs的displacementFilter，这是我的代码：

const Filter = withFilters(Container, {
displacement: filters.DisplacementFilter,
})
<Filter displacement={{ displacement: displacementSprite.current }} scale={{ x: scaleX, y: 0 }}>
<AppConsumer>{ app =>
<Sprite
onMount={setup(app)}
ref={displacementSprite}
image={ripple}
anchor={0.5}
x={app.renderer.width / 2}
y={app.renderer.height / 2}
/>}
</AppConsumer>
</Filter>

但我得到了错误Cannot set property 'renderable' of undefined，也许我错过了什么，因为我试图通过React Ref传递精灵。将精灵传递到置换过滤器的正确方法是什么？

我使用的是@inlet/areact pixi版本：^1.2.19和pixi v5

Answer 1

在问题#218 中修复

<Filters displacement={{ construct: [MySprite], ...otherDisplacementMembers }}>

注意：置换过滤器需要一个精灵作为参考需要添加到场景中，否则将无法渲染错误使用就绪状态并渲染过滤器就可以了虽然

得益于Inlet(@Inlet/areact pixi的manainer(的工作代码笔