在react原生列表视图上显示多种类型的行的正确方式是什么？

import React from 'react';

// 创建不同类型的行组件
const TextRow = ({ text }) => <div>{text}</div>;
const ImageRow = ({ imageUrl }) => <img src={imageUrl} alt="Image" />;
const VideoRow = ({ videoUrl }) => <video src={videoUrl} controls />;

// 列表视图组件
const ListView = ({ data }) => {
  return (
    <div>
      {data.map(item => {
        // 根据数据项的类型选择渲染对应的组件
        if (item.type === 'text') {
          return <TextRow text={item.text} />;
        } else if (item.type === 'image') {
          return <ImageRow imageUrl={item.imageUrl} />;
        } else if (item.type === 'video') {
          return <VideoRow videoUrl={item.videoUrl} />;
        }
        return null; // 处理未知类型的行
      })}
    </div>
  );
};

// 使用示例
const data = [
  { type: 'text', text: 'This is a text row' },
  { type: 'image', imageUrl: 'https://example.com/image.jpg' },
  { type: 'video', videoUrl: 'https://example.com/video.mp4' },
];

const App = () => <ListView data={data} />;

export default App;