时间戳

首页 > 解决方案 > 如何从 react-pixi-fiber React 组件中获取本机 PIXI 对象？

reactjs - 如何从 react-pixi-fiber React 组件中获取本机 PIXI 对象？

问题描述

在一个用withApp这个包装的应用程序中：

import { withApp } from "react-pixi-fiber";

还有一些看起来有点像这样的代码：

class Foo extends React.Component {
  // ...
  eventHandler(evt) {
    console.log("Event target =", evt.target);
  }

  render() {
    let comp = (<Sprite interactive texture={...} pointerup={eventHandler} {/* ... */} />);
    console.log("Component =", comp);
    return (comp);
  }
}

这样做，记录为“事件目标”的对象是一个原生 PIXI Sprite 对象，它让我可以访问像getBounds(). 我希望能够从comp变量中访问相同类型的数据（然后将其存储在某个地方），但是当我记录它时，我得到的对象是不同的。它有一个$$typeof: Symbol(react.element)，所以我认为它只是一个 React 对象。我想找到一种方法来访问与其关联的 PIXI 对象，以便以后可以使用该对象来执行诸如对具有各种其他元素的交互式设置的边界检查之类的事情。

有没有办法做到这一点？或者：如何对不是来自例如pointerup、pointermove等的事件的当前目标的对象进行交互性检查？

标签： reactjspixi.js

解决方案

已经有一段时间了，但是如果您仍在寻找解决此问题的方法，则需要ref在Sprite组件上使用 a 。这不是特定于 的react-pix-fiber，只是标准的 React 行为。使用 ReactDOM 的 ref 可以让您访问 html 元素，使用 PIXI 和 react-pixi-fiber，它可以为您提供 PIXI 显示对象。

import React, { createRef, Component } from "react";

class Foo extends Component {
  constructor() {
    super();
    this.ref = createRef();
  }

  eventHandler() {
    console.log(this.ref.current);
  }

  render() {
    return (
      <Sprite
        interactive
        texture={...}
        pointerup={this.eventHandler.bind(this)}
      />
    );
  }
}

除了事件处理程序，this.ref将在其他生命周期方法中可用。虽然之前render，this.ref.current将是未定义的。

或者，您可以使用函数组件和钩子，无论是useCallback钩子还是useRefand的组合useEffect。

import React, { useCallback } from "react";

const Foo = () => {
  const ref = useCallback(sprite => {
    console.log(sprite);
  }, []);

  return (
    <Sprite
      interactive
      ref={ref}
      texture={...}
      pointerup={this.eventHandler.bind(this)}
    />
  );
}

import React, { useEffect, useRef } from "react";

const Foo = () => {
  const ref = useRef();

  useEffect(() => {
    console.log(ref.current);
  }, []);

  return (
    <Sprite
      interactive
      ref={ref}
      texture={...}
      pointerup={this.eventHandler.bind(this)}
    />
  );
}

我在这里创建了每种方法的工作示例（请参阅BunnyClass,BunnyCallback和BunnyRef文件）： https ://codesandbox.io/s/hardcore-maxwell-pirh3

推荐阅读