如何解析HTML到React組件？

這是我的senario：
1.應用程序請求CMS（內容管理系統）頁面內容。
2. CMS返回"<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3.應用程序消耗內容，使用屬性中提供的數據呈現相應的組件。如何解析HTML到React組件？

我不知道如何做步驟3在React的方式，任何意見表示讚賞。

謝謝@Glenn雷耶斯，這裏是Sandbox來顯示問題。

import React from 'react'; 
import { render } from 'react-dom'; 

const SpecialButton = ({ children, color }) => (
    <button style={{color}}>{children}</button> 
); 

const htmlFromCMS = ` 
<div>Hi, 
    <SpecialButton color="red">My Button</SpecialButton> 
</div>`; 

const App =() => (
    <div dangerouslySetInnerHTML={{__html: htmlFromCMS}}> 
    </div> 
); 

// expect to be same as 
// const App =() => (
// <div>Hi, 
//  <SpecialButton color="red">My Button</SpecialButton> 
// </div> 
//); 

render(<App />, document.getElementById('root'));

Here is a live demo通過Vuejs製造。字符串"<div v-demo-widget></div>"可以視爲Vuejs指令並呈現。 Source Code。

來源

2017-06-20 Andy Chen

不要有給你一個確定的答案安迪，但也許能夠指出你的方向，取決於你如何獲得CMS數據。您是否嘗試過使用更高階的組件來呈現從請求中返回的組件？我認爲一個組件然後呈現您的請求的組件可能是要走的路。 –

@BrettEast，一個更高階的組件可以處理請求，但是我的問題是在從CMS獲得字符串'

Hello

'之後，如何讓反應知道該部分' '是組件，需要執行組件的代碼。 –

是的，這是棘手的，任何機會你的傳入數據遵循反應命名模式，大寫字母的反應組件和小寫的HTML元素？也許正則表達式可以做到這一點？ –

您可以嘗試使用ReactDOMserver渲染<MyReactComponent />到html您的服務器上，然後將它傳遞到客戶端，在那裏你可以插入所有通過dangerouslySetInnerHTML收到html。

來源

2017-06-20 06:40:36 GProst

根據[ReactDOMServer]（https://facebook.github.io/react /docs/react-dom-server.html），'RenderToString'接受一個'component'作爲參數而不是像「」這樣的字符串，所以它不能正確呈現。 –

當然，首先，您需要通過組件名稱找到相應的類。然後渲染它。我只是假設它很容易在服務器端（在CMS中）執行。否則，您需要解析整個字符串，將純html和React組件分開，然後將它們一起渲染到另一個組件中。反正，這不是一項簡單的任務，我建議你找一些解決方法。 – GProst

我明白了，所以你的建議是放入CMS的組件邏輯，並且CMS將渲染的組件字符串正確返回？ –

您可能想深入瞭解dangerouslySetInnerHTML。下面是一個例子如何從一個字符串的陣營組件渲染HTML：

import React from 'react'; 
import { render } from 'react-dom'; 

const htmlString = '<h1>Hello World! </h1>'; 

const App =() => (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} /> 
); 

render(<App />, document.getElementById('root'));

這裏

完整的示例：https://codesandbox.io/s/xv40xXQzE

在這裏做出反應的文檔瞭解更多關於dangerouslySetInnerHTML：https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

來源

2017-06-20 08:38:24 glennreyes

如果htmlString cotains一個reactComponent串像' 「

你好

」'？該'MyReactComponent'將HTML字符串不是一個真正的分量 –

對不起球員，給我一次我做一個完整的例子，以減少誤解。 –

有趣的是，我得到你正在尋找的東西。我創建了一個代碼沙箱的位置：https://codesandbox.io/s/WnKvoY6BE – glennreyes

如何解析HTML到React組件？

Hello

回答

你好

相關問題