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

Question

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

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