在react+hooks+antdesign中，如何用后端返回的用$符号拼接的多个图片地址，去渲染可以使预览受控的Image.PreviewGroup

要实现可控的`Image.PreviewGroup`组件，你可以使用React的状态管理来控制预览的显隐以及当前预览的图片地址。在每次预览时，更新状态并设置当前预览的图片地址。以下是一个示例代码：

import { useState } from 'react';
import { Image } from 'antd';

function MyComponent({ imageUrls }) {
  const imageUrlArray = imageUrls.split('$');

  const [previewVisible, setPreviewVisible] = useState(false); // 控制预览的显隐
  const [previewImage, setPreviewImage] = useState(''); // 当前预览的图片地址

  const handlePreview = (url) => {
    setPreviewVisible(true);
    setPreviewImage(url);
  };

  const handleCancel = () => {
    setPreviewVisible(false);
    setPreviewImage('');
  };

  return (
    <div>
      {imageUrlArray.map((url, index) => (
        <Image
          key={index}
          src={url}
          onClick={() => handlePreview(url)} // 点击图片时触发预览
        />
      ))}
      <Image.PreviewGroup
        preview={{
          visible: previewVisible,
          onVisibleChange: (visible) => setPreviewVisible(visible),
          src: previewImage,
        }}
        onCancel={handleCancel}
      >
        {/* 这里可以为空，只是为了渲染预览 */}
        <Image key={previewImage} src={previewImage} />
      </Image.PreviewGroup>
    </div>
  );
}

在上面的示例中，我们使用`useState`来定义两个状态`previewVisible`和`previewImage`，分别控制预览的显隐和当前预览的图片地址。`handlePreview`函数在点击图片时被调用，它更新状态并设置当前预览的图片地址。`handleCancel`函数在取消预览时被调用，它重置状态以隐藏预览。

在`Image.PreviewGroup`组件中，我们使用了`preview`属性来控制预览的显隐和当前预览的图片地址。`onVisibleChange`事件在预览显隐状态改变时被调用，它更新`previewVisible`状态。在`Image.PreviewGroup`组件内部，我们渲染一个空的`Image`组件，只是为了让预览正常工作。

记得在你的组件中引入`useState`和`Image`组件：

import { useState } from 'react';
import { Image } from 'antd';

希望对你有所帮助！如有任何疑问，请随时提问。