Utilizzo contrassegnato in risposta

Question

Desidero utilizzare contrassegnato in reactjs come descritto nello reactjs docs.

<div>{marked(mystring)}</div> 

Io uso babel così ho importare segnato in questo modo:

import { marked } from 'marked'; 

Purtroppo l'istruzione import non funziona. segnato non è definito. Come devo importare contrassegnato qui, in modo che possa usarlo?

Answer 1

Ecco un modo per utilizzare marked con React:

1. Accertarsi di aver installato react-marked
2. Includere marked nel file del progetto package.json:

"dependencies": { 
    "react": "^0.13.3", 
    "marked": "^0.3.5" 
}, 

3. Importa marked nel tuo .jsx(o correlati) File:

import marked from 'marked'; 

4. Utilizza la dangerouslySetInnerHTML approccio descritto nel tutorial7.js example in the React Tutorial(come notato da Janaka), o come mostrato nell'esempio qui di seguito:

import React from 'react'; 
import marked from 'marked'; 

class MarkdownExample extends React.Component { 
    getMarkdownText() { 
    var rawMarkup = marked('This is _Markdown_.', {sanitize: true}); 
    return { __html: rawMarkup }; 
    } 
  render() { 
    return <div dangerouslySetInnerHTML={this.getMarkdownText()} /> 
  } 
} 

Come discusso nel React Tutorial, utilizzando l'attributo dangerouslySetInnerHTML ti dà la ab ility per lavorare con markup raw (HTML). Assicurati di take care when using this attribute, però!

---

Nota: l'approccio React.Component nell'esempio di codice in Fase 4 si basa su di Agnew "Hello World" example e sulle note di questa React.Component vs React.createClass articolo di Goel e Silveira.