Javascript React-如何在没有jquery或innerHTML的情况下将每个文本字母包装在一个范围内

我现在正在使用React，因为它在React中不起作用，所以我尝试复制的javascript代码是：

var textWrapper = document.querySelector('.text');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

var textWrapper=document.querySelector（'.text'）；
textWrapper.innerHTML=textWrapper.textContent.replace（/\S/g，“$&”）；

我目前正在做的是：

const addSpan = (note: any, styles: any) => {
  return DOMPurify.sanitize(
    note.replace(/\S/g, `<span class='letter' style=${styles}>$&</span>`)
  );
};

const addSpan=（注意：任意，样式：任意）=>{
返回domprify.sanitize(
注：替换（/\S/g，`$&`）
);
};

这很好，但是我想要另一个解决方案，在这个解决方案中我不必使用

危险的HTML

，因为它是不安全的。现在的问题是我的

addSpan

函数成功地用span包装了每个字母，但它返回的是一个字符串，而不是将被解释为代码的实际HTML内容。这就是为什么我必须使用

危险的setinenerHTML

，以便它将字符串视为实际代码

---

有没有一种方法可以在不使用jQuery和

危险的HTML

的情况下将文本中的每个字母包装在一个span中？

因此，使用React，我们可以获得JSX的好处。您可以在函数中返回元素本身，而不是返回字符串。下面是一个如何将字符串拆分为span数组的示例，以及如何在组件中调用它

function TestComponent() {

    const addSpan = (note: any, styles: any) => {
     return [...note].map(letter => <span class='letter' style={styles}>{letter}</span>)
    }

    return (
        <div>
            {addSpan("test",{color: 'blue'})}
        </div>
    )
}

函数TestComponent（）{
const addSpan=（注意：任意，样式：任意）=>{
return[…note].map（字母=>{letter}）
}
返回(
{addSpan（“测试”{color:'blue'}）}
)
}

您好，很抱歉我忘了提到我的

addSpan

函数在一个typescript文件中，您提供的

addSpan

函数在typescript中会有什么不同吗？它应该工作相同，我在函数中添加了类型参数。这对我不起作用：（你的

addSpan

似乎有一些语法问题，我不知道如何解决。我有一个代码沙盒示例

function TestComponent() {

    const addSpan = (note: any, styles: any) => {
     return [...note].map(letter => <span class='letter' style={styles}>{letter}</span>)
    }

    return (
        <div>
            {addSpan("test",{color: 'blue'})}
        </div>
    )
}