React rendert md (bemerkenswert) als String

Question

Unten ist eine abgespeckte Version der Komponente, die ich in eine andere Komponente ziehe.

import React from "react" 

var Remarkable = require('remarkable'); 
var md = new Remarkable(); 

const Info = (props) => { 
    return (
    <div className="pop"> 
     <div> 
<h1>{props.title}</h1> 
{md.render('# Remarkable rulezz!')} 
     </div> 
    </div> 
) 
} 

export default Info; 

Auf der Seite wird derzeit gerendert.

Also es ist im wahrsten Sinne des Wortes das ganze Ding als eine Zeichenfolge, wenn ich es wie html verhalten will.

Wie mache ich das? Oder habe ich den ganzen Punkt von md verpasst? Dank

Answer 1

Wenn Sie aus irgendeinem Grund müssen die HTML machen wie sie ist unter Verwendung reagieren Sie dangerouslySetInnerHTML und wickeln Sie den Inhalt mit jedem Tag (div oder span oder etwas anderes)

<div dangerouslySetInnerHTML={{ __html: md.render('# Remarkable rulezz!') }} /> 

Referenzen verwenden müssen:

• https://facebook.github.io/react/tips/dangerously-set-inner-html.html