我有一个从服务器获取的 html 字符串，如下所示：
<h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p>
现在我想将 html 的<img class="cover" src="someimg.jpg">一部分转换为我自己的 React Component <LazyLoadImg className="cover" src="someimg.jpg" />。
如果没有服务器渲染或危险的 SetInnerHTML，我该怎么做？
您的 HTML 字符串。
let responseText = '<h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p>';
通过换行符拆分字符串。
let splitter = /\n/;
let broken = responseText.split(splitter);
从这里开始，去除标签以获得您真正需要的东西是一项非常简单的任务。
broken[0] = broken[0].slice(4, broken[0].length - 5);
broken[1] = broken[1].slice(24, broken[1].length - 3);
broken[2] = broken[2].slice(3, broken[2].length - 4);
繁荣。
console.log(broken); // [ 'Title', 'someimg.jp', 'Introduction' ]
确保上述所有逻辑都在组件中的正确位置结束。我假设您通过 AJAX 调用收到原始字符串。可能将所有这些东西都放在回调中。
这是您的组件。
class ProfileSection extends React.Component {
constructor(props) {
super(props);
}
state = {
}
render () {
return (
<div>
<h1>{broken[0]}</h1>
<LazyLoadImg className="cover" src={broken[1]} />
<p>
{broken[2]}
</p>
</div>
);
}
}