Singen
Das ist mein Senario:
1. Anwendung fordert CMS (Content Management System) für Seiteninhalte an.
2. CMS-Rückgabe "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Die Anwendung konsumiert den Inhalt, rendert die entsprechende Komponente mit den im Attribut bereitgestellten Daten.
Ich kann nicht herausfinden, wie es geht Schritt 3 Bei React ist jeder Ratschlag willkommen.
Danke @Glenn Reyes, hier ist ein Sandkasten 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 hergestellt von Vuejs. Schnur "<div v-demo-widget></div>" könnte als Vuejs-Anweisung behandelt und gerendert werden. Quellcode.
Wie in dieser Antwort von EsterlingAccimeYoutuber erwähnt, können Sie a verwenden parser falls Sie es nicht verwenden möchten dangerouslySetInnerHTML Attribut.
Inzwischen, react-html-parser wurde seit 3 Jahren nicht mehr aktualisiert, also habe ich mich nach einem anderen Modul umgesehen.
html-react-parser macht die gleiche Arbeit, wird aber regelmäßig gewartet und aktualisiert.
Es sollte eine gute Praxis sein, Ihre zu desinfizieren html-String zu verhindern XSS Anschläge. dompurify kann dafür verwendet werden.
Ich habe das Codebeispiel von EsterlingAccimeYoutuber wie folgt aktualisiert:
import React from 'react';
import { render } from 'react-dom';
import parse from 'html-react-parser';
import DOMPurify from 'dompurify';
const SpecialButton = ({ children, color }) => (
<button style={{color}}>{children}</button>
);
const htmlFromCMS = `
<div>Hi,
<SpecialButton color="red">My Button</SpecialButton>
</div>`;
const htmlFrom = (htmlString) => {
const cleanHtmlString = DOMPurify.sanitize(htmlString,
{ USE_PROFILES: { html: true } });
const html = parse(cleanHtmlString);
return html;
}
const App = () => (
<div>
{htmlFromCMS && htmlFrom(htmlFromCMS)}
</div>
);
render(<App />, document.getElementById('root'));
Inspiriert durch den obigen Originalbeitrag, daher besonderer Dank an die Originalautoren!
Für jede zukünftige Erweiterung 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"));
Sie können versuchen, es zu verwenden ReactDOMserver zu rendern <MyReactComponent /> hinein html auf Ihrem Server und übergeben Sie es dann an den Client, wo Sie alle empfangenen einfügen können html über dangerouslySetInnerHTML.
10056400cookie-checkWie parse ich HTML in die React-Komponente?yes
Ich habe keine endgültige Antwort für Sie, Andy, kann Ihnen aber möglicherweise eine Richtung weisen, je nachdem, wie Sie die CMS-Daten erhalten. Haben Sie versucht, eine Komponente höherer Ordnung zu verwenden, um diejenige zu rendern, die von der Anfrage zurückkommt? Ich denke, eine Komponente, die dann Ihre angeforderte Komponente rendert, könnte der richtige Weg sein.
– Brett Osten
20. Juni 2017 um 4:59 Uhr
@BrettEast, eine Komponente höherer Ordnung könnte die Anfrage ausführen, aber mein Problem besteht darin, die Zeichenfolge wie zu erhalten
<h4>Hello</h4><reactcomponenct attr1="foo"></mycomponenct>von CMS, wie man das Teil reagieren lässt<reactcomponenct attr1="foo"></mycomponenct>Komponente ist, muss der Code der Komponente ausgeführt werden.– Singen
20. Juni 2017 um 8:21 Uhr
Ja, das ist knifflig. Gibt es eine Chance, dass Ihre eingehenden Daten React-Benennungsmustern folgen, mit einem Großbuchstaben für React-Komponenten und Kleinbuchstaben für HTML-Elemente? Vielleicht könnte eine Regex den Trick machen?
– Brett Osten
20. Juni 2017 um 8:25 Uhr
Ja, ich denke, es ist in Ordnung, Namensmustern zu folgen, aber es sieht so aus, als müsste ich einen Compiler schreiben, um so etwas wie eine Winkeldirektive zu tun …
– Singen
20. Juni 2017 um 8:57 Uhr