React - 如何在没有 jquery 或 innerHTML 的情况下将每个文本字母包装在跨度中

Question

I am working with React right now, the javascript code I am trying to duplicate because it doesn't work in React is:

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

What I am currently doing is:

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

<div
      className={classnames('text', classes.aStyle)}
      dangerouslySetInnerHTML={{
        __html: addSpan(myNote, styles)
      }}
/>

This is working fine, but I want another solution in which I don't have to use dangerouslySetInnerHTML because it is unsafe. The problem right now is that my addSpan function successfully wraps each letter with a span, but it's returning a string instead of actual HTML contents that will be interpreted as code. That's why I then have to use dangerouslySetInnerHTML so that it sees the string as actual code.

Is there a way to wrap each letter of a text in a span without using jQuery and dangerouslySetInnerHTML ?

Answer 1

so with React we get the benefit of having JSX. Instead of returning a String, you have the ability to return the element itself in your function. Below is an example of how to split your string into an array of span's and then how you would call it in your component.

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>
    )
}