Javascript 如何在字符串中动态创建组件？

我知道如何根据列表动态创建react组件，如文档所示。但是，我希望动态地创建它们，而不是一起创建，中间有一些字符串。具体来说，我想在一些自定义组件中包含每个正则表达式

例如：

猫在玩狗和老鼠

变成

猫在玩狗和老鼠

---

我知道如何执行正则表达式，但只要将标记添加到字符串中，它们仍然是字符串，而不是组件。

返回字符串数组和组件

import React from "react";

export default function App() {
  return (
    <div>
      {"The cat is playing with the dog and the mouse"
        .split(/(cat|dog|mouse)/)
        .map((x, i) => (i % 2 ? <Animal>{x}</Animal> : x))}
    </div>
  );
}

function Animal({ children }) {
  return <span style={{ color: "red" }}>{children}</span>;
}

从“React”导入React；
导出默认函数App（）{
返回(
{“猫在玩狗和老鼠”
.split（/（猫|狗|鼠）/）
.map（（x，i）=>（i%2？
您有任何您尝试过的代码吗？