使用forwardRef的组件使用connect

`forwardRef` 是 React 的高级 API，它允许我们将引用类型（如 DOM 元素或自定义组件）作为 props 传递给函数组件，而这些组件通常是由其他组件渲染的，例如 `AiSummaryContent` 这样的例子中，可能有一个父组件想把 `ref` 传递进去以便于控制某个内嵌元素的行为。

然而，当你想要将一个组件与 Redux store 进行连接时，`connect` 函数通常用于 Class Components 或者传统函数组件，因为它处理的是 props 和 actions，而不是引用类型。对于使用 `forwardRef` 的情况，Redux 的 `connect` 不直接适用，因为它是用来操作 props 的变化，而不是直接操作内部组件实例。

如果你仍然希望在这样的场景下将 Redux 的状态和方法绑定到 `AiSummaryContent` 组件，你应该这样做：

1. 首先，确保你的 `AiSummaryContent` 组件已经是一个可复用的普通函数组件（不是 Class Component），并且接受一个 `ref` prop。然后，你可以选择以下两种方法之一：

- **手动绑定**: 在父组件里，获取到 Redux 中的状态和 action creators 后，手动将其作为 props 传给 `AiSummaryContent`。例如：

     import { useSelector, useDispatch } from 'react-redux';
     
     function ParentComponent() {
       const aiSummary = useSelector(state => state.aiSummary);
       const setHighLightTime = useDispatch();

       return <AiSummaryContent ref={yourRef} aiSummary={aiSummary} setHighLightTime={setHighLightTime} />;
     }

- **Redux Toolkit 中间件**: 如果你使用了 Redux Toolkit，可以考虑使用 `useSelector` 和 `useDispatch` 结合 `applyMiddleware` 来提供一个包含所有你需要状态和方法的对象，而不是分开传递每个单独的 prop。

- **Redux HOC**: 如果你的应用仍依赖于旧版 Redux，可以创建一个 Higher-Order Component (HOC)，将 Redux 前端逻辑包装到一起，再将这个 HOC应用到 `AiSummaryContent` 上。

2. 注意，尽管 `forwardRef` 可以让你在父组件上操作子组件，但当涉及到 Redux 的时候，最好还是保持清晰的层次结构，避免在高阶组件中混合状态管理和组件引用。

综上所述，由于 `forwardRef` 和 `connect` 的不同目标，你可以在不使用 `forwardRef` 的情况下连接 Redux，或者找到一种适合的策略来结合它们。