所以我給這個代碼:如何設置innerHTML的JSX格式
render() {
console.log(this.props, 'ey');
const var1 = "<div className={{blahblah}} style={{width: '10px'}}>{textvar}</div>"
return (
<div dangerouslySetInnerHTML={{ __html: `${var1}` }}>
</div>
);
}
當然,這只是一個例子,但var1
應該在JSX格式的HTML文件的一大塊,但是這樣做,一個使他們因爲它們並不會將它們轉換爲常規html。
我也嘗試過通過componentDidMount上的ref設置innerHTML,但同樣的問題發生。
這是它應該是什麼它呈現時,如:
<div class="blahblah style="width: 10px"}}>the variable text</div>
任何幫助將不勝感激。謝謝!
真正的問題是「爲什麼」。作爲「當然,只是一個例子」這實在不夠好 - 你在做什麼?因爲通常解決方案是「不要使用HTML,獲取您的數據,並將其正確注入到組件中」。 –
@ Mike'Pomax'Kamermans因爲客戶端想要這樣做,他們希望將它存儲在某個地方,幾個版本的頁面,並且只需更新這些文件/數據而無需推送另一個提交。當你試圖向客戶辯論時,你知道這種感覺,但仍然最終做他們想做的事情嗎? :D –
如果客戶需要這麼多的靈活性,你最終將爲他們構建React框架,他們需要學習如何在React中編程....我一直在走這條路,你打開了一罐蠕蟲。 –