reactjs 面板在展示的时候获取到focus

在React中，要在面板展示时获取焦点，你可以使用useEffect钩子来实现。

首先，你需要在组件中添加一个ref，用于引用面板元素。可以使用useRef钩子来创建一个ref对象。

import React, { useEffect, useRef } from 'react';

function Panel() {
  const panelRef = useRef(null);

  useEffect(() => {
    if (panelRef.current) {
      panelRef.current.focus();
    }
  }, []);

  return (
    <div ref={panelRef}>
      {/* 面板内容 */}
    </div>
  );
}

export default Panel;

在上面的代码中，我们创建了一个panelRef引用，并将其附加到面板的div元素上。然后，在useEffect钩子中，我们检查panelRef.current是否存在，如果存在，则调用focus()方法来获取焦点。

最后，将面板内容放置在面板的div元素中，这样当面板被渲染时，它将自动获取焦点。

请注意，在useEffect钩子中，我们传递了一个空数组作为第二个参数，这样我们可以确保只在组件首次渲染时获取焦点。如果你希望在其他条件下获取焦点，可以根据需要更改第二个参数