在 react.js 项目中运行一个 pixi.js 脚本答案

【问题标题】：Run a pixi.js script in react.js project在 react.js 项目中运行一个 pixi.js 脚本
【发布时间】：2018-11-06 08:27:38
【问题描述】：

我正在尝试在 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;

感谢您的帮助。

【问题讨论】：

标签： javascript reactjs pixi.js

【解决方案1】：

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

将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

【讨论】：