渲染HTML字符串通過自定義分析

反應組件我有一個HTML字符串從服務器獲取它看起來像這樣：渲染HTML字符串通過自定義分析

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

現在我要變換的HTML與<img class="cover" src="someimg.jpg">部分轉換爲自己的陣營組件<LazyLoadImg className="cover" src="someimg.jpg" />。

沒有服務器渲染或危險的SetInnerHTML，我該怎麼做？

來源

2016-04-27 movila

爲什麼你需要獲取整個HTML字符串？難道你不能只抓取類和src屬性，並在渲染時將它們彈出到React組件中？ –

那麼，使用ExpressJS和所見即所得編輯器構建後端的人呢。所以，在前端我只能從WYSIWYG編輯器解析的html字符串中檢索結果。 – movila

您的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-28 07:36:42

渲染HTML字符串通過自定義分析

回答

相關問題