Использую react-pixi, столкнулся с проблемой динамического обновления компонента Stage.
Цель: добавление и удаление компонетов на клик по кнопке.
Текущий код:
src/app/main.js
**imports**
export class Canvas extends React.Component {
constructor() {
super();
this.stage = React.createRef();
...
}
addComponent(){
//How can i do this?
}
**other methods**
render() {
return (
<Stage
width={this.w}
height={this.h}
options={{ autoDensity: true, backgroundColor: this.c }}
ref={this.stage}
onClick={this.handleClick}
>
<Container>
<SomeObject tint={0x00ffff} x={150} y={100} />
</Container>
</Stage>
);
}
src/pages/page.js
import { Canvas } from "../app/main";
export const Page = () => {
const canvas = React.createRef();
...
return (
<Layout>
<Button onClick={function(){
canvas.current.addComponent()
}}/>
<Canvas ref={canvas} />
</Layout>
}
Правильно ли я работаю с компонентами React и как я могу выполнить свою задачу? Ps: на CodePen разработчика react-pixi есть пример mount-unmount node, но там он использует PIXI.Application, что в моем случае не действенно.