alex-kinokon / jsx-dom

Use JSX to create DOM elements.
BSD 3-Clause "New" or "Revised" License
277 stars 30 forks source link

ref is called on function components #74

Closed KapitanOczywisty closed 2 years ago

KapitanOczywisty commented 2 years ago

Currently ref is called on any JSX element (tag or FC), but react uses it only on tags, for FC you have to manually handle ref prop (https://reactjs.org/docs/forwarding-refs.html).

Consider example:

interface FancyInputProps {
  ref?: Ref<HTML.Input>;
}
function FancyInput({ref} : FancyInputProps){
  return <div class="fancy-input">
    <input type="text" ref={ref} />
  </div>;
}

let input : HTML.Input;
document.body.append(<FancyInput ref={(ref) => console.log(input = ref)} />);

// ref is called twice
// <input type="text">
// <div class="fancy-input">

console.log(input);
// returns div, but input is expected
// <div class="fancy-input">