References

You can reference DOM elements simply by storing them in variables:

1linkconst x = <div>Hellow World!</div>;

However, that can reduce readability as it can lead to overmixing of JS and JSX:

1linkfunction MyComponent(_, renderer) {

2link  const x = <div>Hellow World!</div>

3link  const remove = () => renderer.remove(x);

4link

5link  return <div>

6link    {x}

7link    <br/> Also other stuff

8link    <button onclick={remove}>Hola</button>

9link  </div>;

10link}

You can use ref() to avoid that and keep layout and logic as separated as possible:

1linkimport { ref } from 'render-jsx/common';

2link

3linkfunction MyComponent(_, renderer) {

4link  const x = ref();

5link  const remove = () => renderer.remove(x.$);

6link

7link  return <div>

8link    <div _ref={x}>Hellow World!</div>

9link    <br/> Also other stuff

10link    <button onclick={remove}>Hola</button>

11link  </div>;

12link}