javascript - 在 react.js 项目中运行 pixi.js 脚本

Question

我试图在 React 项目中运行 pixi.js 脚本，但我被这个错误阻止了:

Cannot read property 'appendChild' of null

我不知道为什么会出现这个错误。我的脚本必须在 div 中创建一个 Canvas 元素以显示具有扭曲效果的图像:http://guillaumeduclos.fr/ripple-effect/它在基本的 HTML 和 JS 环境中运行良好。

我的代码:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import image from './image.png';
import * as PIXI from 'pixi.js'

var width = window.offsetWidth;
var height = window.offsetHeight;
var playground = document.getElementById('pxrender');  
var canvas;
var ratio = 150 / 830;
var count = 0;
var raf;

var renderer = PIXI.autoDetectRenderer(width, height,{transparent:true});
renderer.autoResize = true;
var tp, preview;
var displacementSprite,
    displacementFilter,
    stage;

class App extends Component {

  state = {
    playground: null
  }

  componentDidMount() {
    this.setState({playground: this.refs.pxrender});
  }

  setScene = (url) => {
    playground.appendChild(renderer.view);
    stage = new PIXI.Container();
    tp = PIXI.Texture.fromImage(url);
    preview = new PIXI.Sprite(tp);
    preview.anchor.x = 0;
    displacementSprite = PIXI.Sprite.fromImage('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');
    displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
    displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
    displacementSprite.scale.y = 0.6;
    displacementSprite.scale.x = 0.6;
    stage.addChild(displacementSprite);
    stage.addChild(preview);
    this.animate();
  }

  removeScene = () => {
    cancelAnimationFrame(raf);
    stage.removeChildren();
    stage.destroy(true);
    playground.removeChild(canvas);
  }

  animate = () => {
    raf = requestAnimationFrame(this.animate);
    displacementSprite.x = count*10;
    displacementSprite.y = count*10;
    count += 0.05;
    stage.filters = [displacementFilter];
    renderer.render(stage);
    canvas = playground.querySelector('canvas');
  }

  render() {

    this.setScene(image);

    return (
      <div ref="pxrender" id="pxrender">

      </div>
    );
  }
}

export default App;

感谢您的帮助。

Answer 1

您需要在 componentDidMount() 中启动您的 Pixi 应用程序，而不是 render()。

将this.setScene(image);移动到componentDidMount()，像这样:

componentDidMount() {
    this.setScene(image);
}

有关 React 中 pixi.js 场景的更完整示例，请查看此处:https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/DatePicker.jsx