簡體   English   中英

React - 如何在沒有 jquery 或 innerHTML 的情況下將每個文本字母包裝在跨度中

[英]React - How to wrap each letter of text in a span without jquery or innerHTML

我現在正在使用 React,我試圖復制的 javascript 代碼在 React 中不起作用是:

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

我目前正在做的是:

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

這工作正常,但我想要另一個解決方案,因為它不安全,我不必使用dangerouslySetInnerHTML的SetInnerHTML。 現在的問題是我的addSpan function 成功地用跨度包裝了每個字母,但它返回一個字符串而不是實際的 HTML 內容,這些內容將被解釋為代碼。 這就是為什么我必須使用dangerouslySetInnerHTML以便將字符串視為實際代碼的原因。

有沒有辦法在不使用 jQuery 和dangerouslySetInnerHTML的情況下將文本的每個字母包裝在一個跨度中?

所以有了 React,我們得到了 JSX 帶來的好處。 您可以在 function 中返回元素本身,而不是返回字符串。 下面是如何將字符串拆分為跨度數組以及如何在組件中調用它的示例。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM