如何設置innerHTML的JSX格式

所以我給這個代碼：如何設置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>

任何幫助將不勝感激。謝謝！

來源

2017-04-26 I am L

真正的問題是「爲什麼」。作爲「當然，只是一個例子」這實在不夠好 - 你在做什麼？因爲通常解決方案是「不要使用HTML，獲取您的數據，並將其正確注入到組件中」。 –

@ Mike'Pomax'Kamermans因爲客戶端想要這樣做，他們希望將它存儲在某個地方，幾個版本的頁面，並且只需更新這些文件/數據而無需推送另一個提交。當你試圖向客戶辯論時，你知道這種感覺，但仍然最終做他們想做的事情嗎？：D –

如果客戶需要這麼多的靈活性，你最終將爲他們構建React框架，他們需要學習如何在React中編程....我一直在走這條路，你打開了一罐蠕蟲。 –

你需要這樣做使用ES6 interpolated string literals（在規範中不準確稱爲模板文字）：

<div dangerouslySetInnerHTML={{ __html: `${var1}` }}>

但是，這會更簡單：

<div dangerouslySetInnerHTML={{ __html: var1 }}>

然而，在您的字符串內html，如果您想要使用blahblah和textvar變量的值，則可能需要使用插值字符串文字。請注意，您需要使用class而不是className，因爲React只會設置內部html，而不是將其視爲JSX，className僅適用於JSX。

const var1 = `<div class=${blahblah}>${textvar}</div>`;

如果您使用的是類，則不需要使用style關鍵字。只需在CSS中設置寬度即可。您可以看到一個working example of the above on CodePen。

來源

2017-04-26 00:20:38

還有其他方法嗎？因爲是的，我已經考慮過這個解決方案，但是它有很多限制，比如，如果我想設置一個變量類名？或者如果我將調用一個函數/綁定一個事件。 –

還有其他方法。在你的問題中解釋你想要達到的目標。或者如果你有幾個你想了解的場景，可以創建新的stackoverflow問題。 –

如何設置innerHTML的JSX格式

回答

相關問題