我从服务器获取了一个 html 字符串,如下所示:
<h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p>
现在我想用 <img class="cover" src="someimg.jpg">
转换 html部分转换为我自己的 React 组件 <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>
);
}
}
关于javascript - 通过自定义解析将 html 字符串渲染到 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36898978/