如何在节点中的文本中替换/注入html标签？

Question

我在 react js 项目中有一个组件，它显示一些文本。 text 变量是字符串类型，其中包含一些制表符转义字符。我想替换这个制表符并使用 div 。我如何将其替换为 这样当它呈现时，它会在呈现 HTML 时输出 div。所以在浏览器的页面源代码上我看到了这样的东西 => <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

你好厄齐尔，

继续尝试这个 sn-p，看看这是否是您想要实现的目标，伙计！让我们知道你的结果！

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>

Answer 2

您可以将text 拆分为\t，并在每个拆分后渲染一个div，如下所示：

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

在sn-p中：

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 是您正在迭代的当前字符串。