Markdown'u bir React bileşeninden nasıl görüntüleyebilirim?

Question

Dokümanlarımı işaretli olarak yazdım ve bu dosyaları JSX (ES6 + CommonJS) kodumdan React bileşenlerine dönüştürmek istiyorum. Bunu nasıl başarabilirim?

Örneğin, styles.markdown var ve bunu bir <p> etiketine dönüştürmek istiyorum. Böyle

Answer 1

Sadece bir Markdown ayrıştırıcı bir çağrı sarar bir tepki basit bileşeni oluşturun.

• Remarkable
• Marked

Artık bir bileşen böyle oluşturabilirsiniz: JavaScript için iki çok iyi olanlar vardır

zaten bir tane var için kullanılan

var MarkdownViewer = React.createClass({ 
    render: function() { 
     // pseudo code here, depends on the parser 
     var markdown = markdown.parse(this.props.markdown); 
     return <div dangerouslySetInnerHTML={{__html:markdown}} />; 
    } 
}); 

Orada, ama artık muhafaza edilmiyor gibi görünüyor: https://github.com/tcoopman/markdown-react

Ayrıca, bir React Markdown Düzenleyicisine ihtiyacınız varsa, aşağıdakilere göz atın: react-mde. Yasal Uyarı: Ben yazarım.

Answer 2

deneyin şey:

import fs from 'fs'; 
import React, { Component, PropTypes } from 'react'; 

class Markdown extends Component { 
    constructor() { 
     super(props); 
     this.state = { contents: '' }; 
     this.componentDidMount = this.componentDidMount.bind(this); 
    } 

    componentDidMount() { 
     const contents = fs.readFileSync(this.props.path, 'utf8'); 
     this.setState({ contents }); 
    } 

    render() 
     return (
      <div> 
       {this.state.contents.split('\n').map((line, i) => 
        line ? <p key={i}>{line}</p> : <br key={i} />)} 
      </div> 
     ); 
    } 
} 

Markdown.propTypes = { path: PropTypes.string.isRequired }; 

React.render(<Markdown path='./README.md' />, document.body); 

Yoksa ES7 + özelliklerini kullanıyorsanız:

import fs from 'fs'; 
import React, { Component, PropTypes } from 'react'; 

class Markdown extends Component { 
    static propTypes = { path: PropTypes.string.isRequired }; 

    state = { contents: '' }; 

    componentDidMount =() => { 
     const contents = fs.readFileSync(this.props.path, 'utf8'); 
     this.setState({ contents }); 
    }; 

    render() { 
     return (
      <div> 
       {this.state.contents.split('\n').map((line, i) => 
        line ? <p key={i}>{line}</p> : <br key={i} />)} 
      </div> 
     ); 
    } 
} 

React.render(<Markdown path='./README.md' />, document.body); 

Sen brfs eğer fs.readFileSync kullanabilmek için dönüşümleri kullanılarak gerekecektir Bu istemci tarafı çalışıyor.

Answer 3

Markalama metninden html oluşturan Markdown bileşenine örnek olarak, yükleme verileri mantığı ayrı bir depoda/ana bileşende/her ne şekilde uygulanmalıdır. Markdown'u html'ye dönüştürmek için marked paketini kullanıyorum.

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

export default class MarkdownElement extends React.Component { 
    constructor(props) { 
    super(props); 

    marked.setOptions({ 
     gfm: true, 
     tables: true, 
     breaks: false, 
     pedantic: false, 
     sanitize: true, 
     smartLists: true, 
     smartypants: false 
    }); 
    } 
    render() { 
    const { text } = this.props, 
     html = marked(text || ''); 

    return (<div> 
     <div dangerouslySetInnerHTML={{__html: html}} /> 
    </div>); 
    } 
} 

MarkdownElement.propTypes = { 
    text: React.PropTypes.string.isRequired 
}; 

MarkdownElement.defaultProps = { 
    text: '' 
}; 

Answer 4

Markdown bileşeni ile paket react-markdown iyi seçim olacaktır: Geç partiye biraz olduğum

import React from 'react' 
import Markdown from 'react-markdown' 

var src = "# Load the markdown document" 

React.render(
    <Markdown source={src} />, 
    document.getElementById('root') 
); 

Answer 5

ama bunun yukarıda belirtilenler dışında bir rakip kütüphane değil bir yararı vardır yazdı dangerouslySetInnerHtml hack'ına ihtiyaç duyuyor: https://github.com/probablyup/markdown-to-jsx