javascript - 通过自定义解析将 html 字符串渲染到 React 组件

Question

我有一个从服务器获取的 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，我该怎么做？

Answer 1

您的 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>
    );
  }
}