如何在節點的文本中替換/注入 html 標簽？

Question

我在 react js 項目中有一個組件，它顯示一些文本。 text 變量是字符串類型，其中包含一些制表符轉義字符。 我想替換這個制表符並使用 div。 我如何將其替換為這樣，當它呈現時，它在呈現 HTML 時輸出 div。 所以在瀏覽器的頁面源代碼上，我看到類似這樣的內容 => <span> once upon a time, <div> there was a man <div> who had a house. </span> <span> once upon a time, <div> there was a man <div> who had a house. </span>

text = "從前，\t有一個人\t有房子。";

class somcomponent extends React.Component {
  render() {
    return <span> {text}</span>;
  }
}

Answer 1

您可以通過\t拆分text並在每個拆分時渲染一個div ，如下所示：

class somcomponent extends React.Component {
  render() {
    return <span>
      {text.split('\t').map(s=><div>{s}</div>)}
    </span>
  }
}

在一個片段中：

 const rootElement = document.getElementById("root"); ReactDOM.render( <Demo />, rootElement ); function Demo() { let text = "once upon a time, \t there was a man \t who had a house."; return ( <span> {text.split('\t').map(s=><div>{s}</div>)} </span> ); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

text.split('\t')會將您的文本拆分為一個介於 '\t' 之間的字符串列表。

現在，使用map為該列表中的每個元素呈現<div>{s}</div> ，而s是您正在迭代的當前字符串。

Answer 2

嗨厄齊爾，

Go 提前嘗試一下這個片段，看看這是否是你想要實現的，朋友！ 讓我們知道你的結果！

 const domEl = document.getElementById("container"); ReactDOM.render(<RemoveTabs />,domEl); function RemoveTabs() { let text ="Once upon a time, \t there was a man \t who had a house."; return(<div>{"<div>"+text.replace(/\t/g,'</div><div>')+"<div>"}</div>); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script> <div id="container"></div>