linkRefs

You can reference DOM elements with variables:

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

2linksetTimeout(() => div.textContent = 'GoodBye, Blue Sky!', 2000);

3link

4linkrenderer.render(div).on(document.body);

But typically its easier to have all the DOM tree described in one place. For that purpose, you can use ref objects to reference elements (and generally any value) that will be resolved later:

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

2link

3link// ...

4link

5linkconst div = ref();

6linksetTimeout(() => div.$.textContent = 'GoodBye, Blue Sky!', 2000);

7link

8linkrenderer.render(

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

10link).on(document.body);

linkGeneric Use

Refs can also be used to reference any other not-yet-resolved value:

1linkconst answer = ref<number>();

2link

3link// ...

4link

5linkanswer.resolve(42);

linkSafety

If you access a ref's .$ property before the ref is resolved, it will throw an error:

1linkconst myRef = ref();

2linkmyRef~~~~~.~$~;

If a ref is also resolved multiple times, it will throw an error:

1linkconst myRef = ref<string>();

2linkmyRef.resolve('hellow');

3linkmyRef~~~~~.~resolve~~~~~~~(~'goodbye!'~~~~~~~~~~)~;

You can check whether a ref is resolved via its .resolved property:

1linkconst myRef = ref<string>();

2linkmyRef.resolved;  // --> false

3link

4linkmyRef.resolve('hellow');

5linkmyRef.resolved;  // --> true