useRefまたはuseImperativeHandleなしでReactの子コンポーネントから親に関数を渡す方法


親に useState を追加し、子にセッターを与えるだけです.

function Parent() {
    const [api, setApi] = useState()
    return <>
        <button onClick={()=>api.doAlert()}>Trigger alert in child</button>
        <Child setApi={setApi}/>
    </>
}

function Child({setApi}) {
    const [counter, setCounter] = useState(0)
    const doAlert = () => alert("counter is " + counter)
    useEffect(() => setApi({doAlert}), [counter])
    return <button onClick={() => setCounter(c => c + 1)}>
        Increment child counter
    </button>
}


デモ: https://jscomplete.com/playground/s732915