Làm cách nào để hiển thị Markdown từ thành phần React?

Question

Tôi có tài liệu được viết bằng cách đánh dấu và tôi muốn hiển thị các tệp đó từ mã JSX (ES6 + CommonJS) của tôi thành các thành phần React. Làm thế nào tôi có thể đạt được điều này?

Ví dụ: tôi có kiểu.markdown và tôi muốn hiển thị nó thành một thẻ <p>.

Answer 1

Chỉ cần tạo một thành phần đơn giản Phản ứng bọc lấy một cuộc gọi đến một phân tích cú pháp Markdown. Có hai người rất tốt cho JavaScript:

• Remarkable
• Marked

Bây giờ bạn có thể tạo một thành phần như thế này:

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}} />; 
    } 
}); 

Có sử dụng để có số này, nhưng dường như không còn được duy trì nữa: https://github.com/tcoopman/markdown-react

Ngoài ra, nếu bạn cần Trình chỉnh sửa phản hồi đánh dấu, hãy kiểm tra: react-mde. Disclaimer: Tôi là tác giả.

Answer 2

Hãy thử một cái gì đó như thế này:

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

Hoặc nếu bạn đang sử dụng ES7 + các tính năng:

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

Bạn sẽ cần phải sử dụng brfs chuyển đổi để có thể sử dụng fs.readFileSync nếu điều này đang chạy phía máy khách.

Answer 3

Ví dụ về thành phần Markdown hiển thị html từ văn bản đánh dấu, logic của dữ liệu tải nên được triển khai trong cửa hàng riêng biệt/thành phần chính/bất kỳ thứ gì. Tôi đang sử dụng gói marked để chuyển đổi markdown thành html.

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

Gói react-markdown với Markdown phần sẽ là sự lựa chọn tốt:

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

Tôi là một chút muộn để đảng, nhưng tôi đã viết một thư viện đối thủ cạnh tranh với những người nêu trên có một lợi ích bổ sung không cần hack dangerouslySetInnerHtml: https://github.com/probablyup/markdown-to-jsx