将自定义组件附加到已存在的 div

问：

我目前正在尝试编写一种方法，该方法从文件中读取数据并将每一行转换为卡组件，但我似乎无法弄清楚如何做到这一点。每次我尝试将正确定义 Card 组件所需的 html 附加到 div 时，最终什么也没发生，但我能够很好地使用语法。我确实找到了一个临时的解决方法，但我想找到一个更永久的解决方案，因为已经过时了。以下是我目前正在使用的代码：CSVCSVmaterial-uidiv.innerHTML += "additional html"ReactDOMReactDOM

我想附加到的 Div：

function App() {
  return (
    <div className="cards"></div>
  );
}

用于解析 ：CSV

import './App.css';
import Card from './Components/Card';
import '../src/Data/parsing.js';
import Papa from 'papaparse'; 
import ReadString from './Parser';

const { readString } = usePapaParse();

let card_list = document.getElementById('card_list');

const handleReadString = () => {
    const csvString = data;

    readString(csvString, {
      worker: true,
      complete: (results) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');

        results.data.forEach((cardData) => {
          console.log(cardData)
          const cardElement = <Card description={cardData.at(0)} />;
          card_list.innerHTML += "<Card />";
        });

      },
    });
  };

如上所述，我一直在试图弄清楚如何用语法附加这个 html，但这似乎不起作用。我已经能够让它与语法一起使用，但它只呈现了几张卡片，然后退出了我，而且我不断收到通知，说这个语法已经过时了，所以我想看看如何找到更好的解决方案div.innerHTML += "additional html"ReactDOM.render()