1

次のようなサーバーから取得したhtml文字列があります。

<h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p>

<img class="cover" src="someimg.jpg">ここで、一部を自分の React Component に変換して html を変換したいと考えています<LazyLoadImg className="cover" src="someimg.jpg" />。

サーバーのレンダリングや危険なSetInnerHTMLがなければ、どうすればいいですか?

4

1 に答える 1

0

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>
    );
  }
}
于 2016-04-28T07:36:42.397 に答える