单击子组件上的按钮时使父组件成为焦点

Question

我有一个 web 应用程序，我在其中一张接一张地显示多张卡片。 我的 web 应用程序主要用于移动设备。 当应用程序加载时，所有卡片都会立即加载，屏幕滚动到最后一张卡片。 每张卡片底部都有一个按钮。 当有人单击卡片底部的按钮时，我想使卡片成为焦点。 “焦点”是指将卡片的 header 放在屏幕顶部，然后是同一张卡片的内容。

我正在使用以下方法创建一个 ref 挂钩并将其附加到卡上。 我创建了一个 function bringCardIntoFocus ，它带来了 HTML 元素，这个参考是焦点。 然后将此 function 传递给呈现按钮的子组件。 单击按钮时，我正在调用 function 以使卡片处于焦点位置。

const cardRef = useRef(null);
    const bringCardIntoFocus = () => {
        cardRef.current.focus();
    };
    const Card = () => {
      return (
        <Message
        ref={cardRef}
        content={
            <FlexCol>
                <CardHeader />
                <CardBody />
                <CardFooter focusCard={() => bringCardIntoFocus()}/>
            </FlexCol>
        }
      />
      ); 
};
const CardFooter = ({bringCardIntoFocus}) => {
    const handleClick = () => {
        bringCardIntoFocus();
    }

    return(
        <FlexCol>
            <button onclick={() => handleClick()}>
                Open card
            </button>
        </FlexCol>
    );
}

现在，我看到了两个错误：

1. 当应用程序加载时，我得到：

react_devtools_backend.js:2430 警告：Function 组件不能给出参考。 尝试访问此 ref 将失败。 你的意思是使用 React.forwardRef() 吗？

2. 当我点击“开卡”按钮时

未捕获的类型错误：无法读取 null 的属性“焦点”

上述错误是指 line cardRef.current.focus()