React 컴포넌트에서 Markdown을 렌더링하려면 어떻게 해야 합니까?

React 컴포넌트에서 Markdown을 렌더링하려면 어떻게 해야 합니까?

문서를 마크다운으로 작성했습니다.JSX(ES6+Common)에서 파일을 렌더링하고 싶습니다.JS)를 React 컴포넌트로 코드화합니다.어떻게 하면 좋을까요?

예를 들어 styles.markdown을 가지고 있는데, 그것을 렌더링하고 싶습니다.<p>태그를 붙입니다.

React-Markdown을 사용할 수 있습니다.

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(<ReactMarkdown source={input} />, document.getElementById('container'))

또는 Markdown 파서로 콜을 랩하는 단순한 React 컴포넌트를 작성할 수도 있습니다.JavaScript에 매우 적합한 두 가지가 있습니다.

• 주목할 만한
• 표시했다.

이제 다음과 같은 구성 요소를 만들 수 있습니다.

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

이전에는 이미 1개가 있었지만, 현재는 유지보수가 되지 않는 것 같습니다.https://github.com/tcoopman/markdown-react

또한 React Markdown Editor가 필요한 경우 react-mde를 확인하십시오.면책사항:나는 작가다.

패키지:Markdown컴포넌트를 선택하는 것이 좋습니다.

import React from 'react'
import Markdown from 'react-markdown'
    
var src = "# This is markdown document"
    
React.render(
  <Markdown children={src} />,
  document.getElementById('root')
)

여기에 다음과 같이 쓸 수 있습니다.

<Markdown>
  # Header

  * dotted lists
  * [url](/doc)
</Markdown>

link-urls 및 image-urls 등의 트랜스포머를 지정할 수 있습니다.

파티에 조금 늦었지만, 나는 위에 언급된 것들에게 경쟁 도서관을 썼는데, 그 도서관이 필요하지 않다는 부가적인 이점이 있다.dangerouslySetInnerHtmlhack : https://github.com/probablyup/markdown-to-jsx

마크다운 텍스트에서 html을 렌더링하는 마크다운 컴포넌트의 예로서 데이터를 로드하는 로직은 별도의 스토어/부모 컴포넌트/어떠한 것으로 구현해야 합니다.마크다운을 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: ''
};

다음과 같은 방법을 사용해 보십시오.

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

또는 ES7+ 기능을 사용하는 경우:

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

클라이언트 측에서 fs.read File Sync를 사용하려면 brfs 변환을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/31875748/how-do-i-render-markdown-from-a-react-component