react pixi在使用useTick时出错

Question

我在react with react pixi 中使用useTick时遇到了一些问题

出现错误：

未找到PIXI.Application的上下文。确保包裹组件带AppProvider

所以我试图包装AppProvider，但没有成功。

因此，这是我的代码的具体组件的进口反应像素：

import React, {useState,useEffect} from 'react';
import { render } from 'react-dom'
import {  ParticleContainer, useApp, useTick, Stage, Sprite, Container } from '@inlet/react-pixi'
import { Application } from 'pixi.js'
let scale = { x: 0.5, y: 0.5 };
const TryPixi = () => {
const app = useApp();

const [itemRotation, setItemRotation] = useState(0);

useTick(delta => {
setItemRotation(itemRotation + 1) 
})


return (

<Stage width={139} height={140} options={{ transparent: true }}>
<Container   
x={70} 
y={70} 
>
<Sprite 
image="../../assets/ninja.png" 

anchor={[0.5, 0.5]} 
scale={scale} 
rotation={0.5}
/>
</Container>
</Stage>


);
};
export default TryPixi;

并从另一个组件调用这样的组件：

<AppProvider><TryPixi /></AppProvider>

我试过使用和不使用AppProvider，是的，AppProvideris导入了：-(希望任何人都能帮忙。

Answer 1

只能在只返回动画对象的组件上使用useTick。

const Ninja = () => {
const [itemRotation, setItemRotation] = useState(0);

useTick(delta => {
setItemRotation(itemRotation + 1) 
})


return (
<Sprite 
image="../../assets/ninja.png" 

anchor={[0.5, 0.5]} 
scale={scale} 
rotation={0.5}
/>
);
};
const TryPixi = () => {
return (
<Stage width={139} height={140} options={{ transparent: true }}>
<Container   
x={70} 
y={70} 
>
<Ninja />
</Container>
</Stage>
);
};

Answer 2

据我从Stage组件源代码中了解，它在componentDidMount中创建了自己的应用程序[第115-121行]：

this.app = new Application({
width,
height,
view: this._canvas,
...options,
autoDensity: options?.autoDensity !== false,
})

然后，它通过将孩子们包装在AppProvider组件中向他们提供这个应用程序[第216-217行]：

const { children } = this.props
return <AppProvider value={this.app}>{children}</AppProvider>

这意味着您只能在Stage的子组件中使用依赖于此上下文的钩子，而不能在Stage组件本身中使用；因为useApp钩子使用这个上下文，而useTick钩子使用useApp钩子。因此，呈现TryPixi的包装器组件应该是这样的：

<Stage><TryPixi /></Stage>

然后从TryPixi组件内部调用钩子。