wake-up-neo.com

Wie parse ich HTML in React component?

Das ist mein Senario:
1. Anwendungsanfrage CMS (Content Management System) für Seiteninhalte.
2. CMS return "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Die Anwendung verwendet den Inhalt und rendert die entsprechende Komponente mit den im Attribut angegebenen Daten.

Ich kann nicht herausfinden, wie Schritt 3 in React, jeder Rat wird geschätzt.

Danke @Glenn Reyes, hier ist ein Sandbox , um das Problem zu zeigen.

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

Hier ist eine Live-Demo gemacht von Vuejs. Zeichenfolge "<div v-demo-widget></div>" könnte als Vuejs-Direktive behandelt und gerendert werden. Quellcode .

13
Sing

Sie möchten sich wahrscheinlich genauer mit dangerouslySetInnerHTML befassen. Hier ist ein Beispiel, wie HTML aus einem String in einer React -Komponente gerendert wird:

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

Vollständiges Beispiel hier: https://codesandbox.io/s/xv40xXQzE

Weitere Informationen zu dangerouslySetInnerHTML finden Sie in den React docs hier: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

17
glennreyes

Du kannst den ... benutzen react-html-parser für den Fall, dass Sie das dangerouslySetInnerHTML Attribut nicht verwenden möchten

import React from 'react';
import { render } from 'react-dom';
import ReactHtmlParser from 'react-html-parser';

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

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

const App = () => (
  <div>
     {ReactHtmlParser(htmlFromCMS)}
  </div>
);


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

Happy Coding !!!

Für alle zukünftigen Erweiterungen von GProst Answer können Sie ReactDOMserver verwenden. So können wir dasselbe implementieren.

import React from "react";
import { render } from "react-dom";
import { renderToString } from "react-dom/server";

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

const renderButton = renderToString(<SpecialButton>MyButton</SpecialButton>);

const htmlFromCMS = `
<div>Hi, 
  ${renderButton}
</div>`;

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

render(<App />, document.getElementById("root"));
1
lost_in_magento

Sie können versuchen, mit ReactDOMserver<MyReactComponent /> In html auf Ihrem Server zu rendern und es dann an den Client weiterzuleiten, wo Sie alle empfangenen html über dangerouslySetInnerHTML .

1
GProst