SvelteでReactのforwardRef的なことのやり方

カスタムコンポーネントにref propを渡して参照取りたい時にreactのforwardRef的なのがsvelteにないかなと思って、色々調べていくつか方法見つけたので、残しておきます。

Reactの場合

import * as React from 'react';

// Parent.jsx
const Parent = () => {
  const ref = React.useRef(null);
  
  React.useEffect(() => {
    if(ref.current) {
      ref.current.focus();
    }
  },[]);
  
  return (<Child ref={ref}/>);
}


// Child.jsx
const Child = React.forwardRef(function Child(props, ref) {
  return (<input ref={ref} />);
});

Svelteの場合

1. writableを使う方法

<script>
	// Parent.svelte
	import Child from "./Child.svelte";

	let ref;

	$: {
		if($ref) {
			$ref.value = "hello from parent ";
		}
	}
</script>

<Child bind:ref={ref}/>

<script>
	// Child.svelte
	import { writable } from 'svelte/store';

	export const ref = writable();
</script>

<input bind:this={$ref}/>

2. callback prop使う方法

<script>
	// Parent.svelte
	import Child from "./Child.svelte";
	import {onMount} from 'svelte';
	
	let ref;

	$: {
		if(ref) {
			ref.value = "hello from parent ";
		}
	}
	
</script>
<Child ref={(el) => (ref = el)}/>

<script>
	// Child.svelte
	import { writable } from 'svelte/store';
	import {onMount} from 'svelte';
	
	let el;
	export let ref;
	
	onMount(()=> {
		if(ref) {
			ref(el);
		}	
	})
	
</script>

<input bind:this={el}/>