将类重构为挂钩元素

Question

我正在尝试将类组件转换为 Hook 组件，但很难翻译一些内容：

sceneSetup = () => {
const width = this.el.clientWidth;
const height = this.el.clientHeight;
this.el.appendChild(this.renderer.domElement);
};

1(如何将其this.el?转换为钩子组件？

---

同样在我的渲染方法中，我返回以下内容：

render() {
return(
<div ref={ref => (this.el = ref)} />
) 
}

2(div 如何转换为钩子？

Answer 1

这怎么会？ 这被翻译成钩子组件？

使用 useRef hook。

2(div 如何转换为钩子？

只需使用 ref 返回divel即可。

function Scene() {
const el = useRef(null);
return <div ref={el} /> // init el ref
}

或者，您也可以使用回调引用来测量节点尺寸。

function Scene() {
const [rect, setRect] = useState(null);
const callbackRef = useCallback(node => {
if (node !== null) {
setRect(node.getBoundingClientRect());
}
}, []);
return <div ref={callbackRef} /> // use callback ref
}