Question 245479 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is there a way to interpolate a plain HTML element into a React component?

I’d like to use PixiJS and Next.js to create a screen-fitting optimal scale ratio stage. I’m aware of @pixi/react, but I want to create a game and it’d be inefficient to re-render the stage everytime an Isogenic entity spawns, unspawns, re-positions and rotates, considering there might be hundreds of entities.

I’ve tried running this:

function createElement() {
  const element = document.createElement('span');
  element.innerText = 'span';
  return element;
}

export default function App() {
  return (
    <h1>Interpolated: {createElement()}</h1>
  );
}

Got:

Objects are not valid as a React child (found: [object HTMLSpanElement]).

The PixiJS getting started page contains this code:

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

So interpolating the HTML text would not work.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've used the useEffect hook and a disjoint state at the moment to activate the level display in PixiJS.

    // `Level` contributes the PixiJS canvas to <main>
const level = new Level();
const [currentScreen, setCurrentScreen] = useState<CurrentScreen>('sigIn');

useEffect(() => {
  if (currentScreen == 'level') {
    level.display();
  } else {
    level.destroy();
  }
}, [currentScreen]);

  2. 0

    Use dangerouslySetInnerHTML

    export default function App() {
  return (
    <h1>
      Interpolated:
      <span dangerouslySetInnerHTML={{ __html: createElement() }} />
    </h1>
  );
}

function createElement() {
  const element = document.createElement("span");
  element.innerText = "span";
  return element.outerHTML;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search