如何在节点中的文本中替换/插入html标记

Question

我在react js项目中有一个组件，它显示一些文本。该文本变量的类型为字符串，其中包含一些制表符转义符。我想替换这个制表符并使用div。我该如何用以便在渲染时，在渲染HTML时输出中的div。所以在浏览器中的页面源上，我看到了这样的内容=><span> once upon a time, <div> there was a man <div> who had a house. </span>

text＝"；从前，有一个人有一所房子">

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

Answer 1

您可以将text拆分为t，并在每次拆分时呈现一个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

嗨，厄齐尔，

继续尝试这个片段，看看这是否是你想要实现的，朋友！让我们知道你的结局！

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>