Question

我有这个React组件，在该组件完成渲染后，我试图将焦点移到特定的div。

我尝试在浏览器中进行调试，但从未设置containerRef。当我在显示为if (containerRef.current) {的行上暂停执行时，我还可以看到该组件尚未呈现。而且该组件目前仅呈现一次（传递Storybook中的硬编码数据，但还尝试在真实应用程序中对其进行模拟，以为Storybook中的某些包装器组件可能以某种方式触发了钩子）。

有人建议为什么会这样吗？

export function DuplicateSelect(props: DuplicateSelectProps) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.focus();
    }
  });

  return (
    <Overlay isOpen={true}>
      <div className="flex-center">
        <Card className="duplicate-select" elevation={1}>
          <div
            className="duplicate-select-options"
            tabIndex={0}
            ref={containerRef}
          >
            {props.results.map((result) => (
              <Item data={result} />
            ))}
          </div>
        </Card>
      </div>
    </Overlay>
  );
}

在Codesandbox中制作原型，并且可以正常工作：https://codesandbox.io/s/damp-dust-4xiv0

Answer 1

我正在将Blueprint.js用作UI库，在进一步调查中，我发现问题是由于门户内部的<Overlay>组件呈现所致。有一个道具可以禁用此行为，从而解决了该问题。使用门户网站时，似乎裁判可能会摔断？

export function DuplicateSelect(props: DuplicateSelectProps) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.focus();
    }
  });

  return (
    <Overlay isOpen={true} usePortal={false} >
      <div className="flex-center">
        <Card className="duplicate-select" elevation={1}>
          <div
            className="duplicate-select-options"
            tabIndex={0}
            ref={containerRef}
          >
            {props.results.map((result) => (
              <Item data={result} />
            ))}
          </div>
        </Card>
      </div>
    </Overlay>
  );
}

Answer 2

在SELECT [PERIOD], [Student_ID], [ABS_DATE] FROM t_database GROUP BY [Bell_Period] HAVING COUNT(*) >= 4钩子中添加第二个参数，以便在设置引用时触发。

useEffect

useEffect似乎在渲染完成之前被触发

2 个答案: