我在箭头函数中定义列索引参数,但我可以在我的useEffect
中使用原因未定义!我能做什么?
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
if (elementRef.current) {
setBoxViewWidth(elementRef.current.clientWidth);
if (elementRef.current.clientWidth < 1200) {
elementRef.current.clientWidth.style.right = (boxViewWidth / 2) * (columnIndex % 2);
} else if (elementRef.current.clientWidth < 992) {
elementRef.current.clientWidth.style.right = (boxViewWidth / 1) * (columnIndex % 1);
}
}
});
if (elementRef.current) {
resizeObserver.observe(elementRef.current);
}
return () => {
resizeObserver.disconnect();
};
}, [boxViewWidth]);
const RenderBox = ({ style, rowIndex, columnIndex }) => {
console.log(style);
return (
rows && (
<div
style={{
...style,
right: (boxViewWidth / 3) * (columnIndex % 3),
}}
>
......
这里有几个问题:
在useEffect
钩子中引用的columnIndex
将是未定义的,这是因为它的值仅在RenderBox
上下文中可用。所以我们需要一种不同的方式来传递它。我们可以使用data-*
属性来轻松实现这一点。- 传递给
useEffect
(我指的是boxViewWidth
)的依赖项数组中的值可能不足以解释所有组件更新。我们还需要elementRef.current
boxViewWidth
在每次运行时更新两次。这不是一个大问题,但我们也可以解决这个问题。- 没有
HTMLElement.clientWidth.style.right
这样的东西,我想我们也需要HTMLElement.style.right
,修复它。
代码变成:
React.useLayoutEffect(() => {
function updateBoxViewWidth() {
if (!elementRef.current) return
if (elementRef.current.clientWidth === boxViewWidth) return
setBoxViewWidth(elementRef.current.clientWidth)
}
updateBoxViewWidth()
}, [elementRef.current, boxViewWidth])
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
if (!elementRef.current) return
const columnIndex = elementRef.current.getAttribute('data-column-index');
if (elementRef.current.clientWidth < 1200) {
elementRef.current.style.right = (boxViewWidth / 2) * (columnIndex % 2);
} else if (elementRef.current.clientWidth < 992) {
elementRef.current.style.right = (boxViewWidth / 1) * (columnIndex % 1);
}
});
if (elementRef.current)
resizeObserver.observe(elementRef.current);
return () => {
if (elementRef.current)
resizeObserver.disconnect();
};
}, [elementRef.current, boxViewWidth]);
const RenderBox = ({ style, rowIndex, columnIndex }) => {
console.log(style);
return (
rows && (
<div
data-column-index={columnIndex}
style={{
...style,
right: (boxViewWidth / 3) * (columnIndex % 3),
}}
>