创建包含useRef的自定义Hook

Question

在下面的代码中，我创建了一个在其内部使用useState的钩子，该钩子工作得很好。然后我创建了第二个自定义钩子，其中使用useRef在控制台中打印html元素，后者不起作用，因为我不知道如何从我创建的钩子中引用元素。下面的代码是:

import "./styles.css";
import {useEffect, useRef, useState} from "react"
function useChangeText(){
const [n,setN]= useState(0)
const sum= ()=> setN(n + 1)
return {number:n,sum}
}
function useGetHTML(n){
const element= useRef(null)
useEffect(()=>{
console.log(element.current)
},[n])
}
export default function App() {
const hookSum= useChangeText()
const element= useGetHTML(hookSum.number)
return (
<div ref={element} className="App">
<h1>{hookSum.number}</h1>
<button onClick={hookSum.sum}>click +1</button>
</div>
);
}

Answer 1

这是一个从你的useGetHTML钩子中导出ref的问题，这样它就可以被你的消费组件使用，就像你在useChangeText钩子中所做的那样:

function useGetHTML(n){
const element = useRef(null);
useEffect(()=>{
console.log(element.current)
},[n]);

return element;
}

然后在你的组件中，element将不再是未定义的，而是从你的自定义钩子中导出的ref:

const element = useGetHTML(hookSum.number);

Answer 2

您不需要useRef或useEffect。

你可以传递一个setter回调给ref=，一旦你的组件被挂载，它将被你的元素调用:

import "./styles.css";
import {useState} from "react"
function useChangeText(){
const [n,setN]= useState(0)
const sum= ()=> setN(n + 1)
return {number:n,sum}
}
function useGetHTML(n){
const [element, setElementRef] = useState(null)
if (element) { // just use if here
console.log({ element, n })
}
return setElementRef
}
export default function App() {
const hookSum= useChangeText()
const setElementRef= useGetHTML(hookSum.number)
return (
<div ref={setElementRef} className="App">
<h1>{hookSum.number}</h1>
<button onClick={hookSum.sum}>click +1</button>
</div>
);
}