使用引用钩子不触发重新渲染

Question

由于某种原因，当像这样使用 ref 时，我的测试没有通过：

import React, { useRef } from "react";
import { waitForElement, render } from "@testing-library/react";
const MyComponent = props => {
const elementRef = useRef(null);
return (
<div>
<div ref={elementRef} />
{elementRef.current && <div data-testid="test-div" />}
</div>
);
};
describe("MyComponent", () => {
it("test-div should exist when the ref is set", async done => {
const { getByTestId } = render(<MyComponent />);
await waitForElement(() => getByTestId("test-div"));
});
});

知道为什么这不起作用吗？

Answer 1

不是测试不起作用，而是"test-div"的渲染。如果您尝试在测试之外呈现此组件，则会得到相同的结果。如 React 文档中所述：

请记住，useRef 在其内容更改时不会通知您。更改 .current 属性不会导致重新呈现。如果你想在 React 将 ref 附加到或分离到 DOM 节点时运行一些代码，你可能想改用回调 ref。

这意味着即使设置了 ref，重新渲染也不会发生。您需要通过其他方式触发它，也许通过使用如上所述的回调引用。