如何使用使用效果和USEREF钩子将焦点设置为React组件中的DIV元素?以及如何测试

搜索一段时间后，浪费了很多时间，我就可以做到。在这里为朋友分享！

组件文件setfocustodivcomponent.js

import React, { useRef, useEffect } from 'react';
export default function SetFocusToDivComponent() {
  const containerRef = useRef(null);
  useEffect(() => {
    containerRef.current.focus();
  });
  return (
    <div
      data-test={'container'}
      ref={errorDisplayWrapperRef}
      tabIndex={-1}
    >
      Hello There!!
    </div>
  );
}

测试文件setfocustodivcomponent.tests.js

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import SetFocusToDivComponent from './SetFocusToDivComponent';
let container;
beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});
afterEach(() => {
  document.body.removeChild(container);
  container = null;
});
test('setting focus', () => {
  act(() => {
    ReactDOM.render(<SetFocusToDivComponent />, container);
  });
  expect(container.querySelector('div[data-test="container"]')).toHaveFocus();
});

如果您使用的是样式的Div而不是普通的HTML Div，则使用innerRef代替ref

const StyledDiv = styled.div`
  border-radius: 0 0 5px 5px;
  border: 1px solid green;
`;
<StyledDiv
  data-test={'container'}
  innerRef={errorDisplayWrapperRef}
  tabIndex={-1}
>
  Hello There!!
</StyledDiv>

PS：不要忘记Tabindex