は、私はこのようになり、サーバから取得したHTML文字列を持つカスタム解析

Question

を経由してコンポーネントを反応させるためにHTML文字列を描画：

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

今、私は<img class="cover" src="someimg.jpg">一部でHTMLを変換したい自分に変換コンポーネント<LazyLoadImg className="cover" src="someimg.jpg" />反応します。

サーバーのレンダリングやdangerouslySetInnerHTMLがない場合、どうすればよいですか？

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