web-dev-qa-db-fra.com

Comment charger un fichier de démarquage dans un composant de réaction?

Comment charger un fichier de démarquage .md dans un composant de réaction? J'ai essayé tant de bibliothèques NPM par le biais de recherches sur Google et je ne peux pas trouver une bonne solution.

 Code image

Je veux charger le fichier .md quelque chose comme:

render() {
    <div>
        <MarkDown src="about.md" />
    </div>
}
reactjsmarkdown
16
PizzaHead

J'utilise marqué ( GitHub ).

Je l'importe d'abord comme ça:

import marked from "marked";

Je récupère ensuite mon fichier * .md dans l'événement componentDidMount de React et le stocke dans l'état de mon composant à l'aide de marked(text) (où text est la réponse):

componentDidMount() {
  const readmePath = require("./Readme.md");

  fetch(readmePath)
    .then(response => {
      return response.text()
    })
    .then(text => {
      this.setState({
        markdown: marked(text)
      })
    })
}

... et enfin, je le restitue sur la page en utilisant l'attribut dangerouslySetInnerHTML:

render() {
  const { markdown } = this.state;

  return (
    <section>
      <article dangerouslySetInnerHTML={{__html: markdown}}></article>
    </section>
  )
}
22
James Donnelly

Un exemple de travail complet avec react-markdown:

import React, { Component } from 'react'
import ReactMarkdown from 'react-markdown'
import termsFrPath from './Terms.fr.md'

class Terms extends Component {
  constructor(props) {
    super(props)

    this.state = { terms: null }
  }

  componentWillMount() {
    fetch(termsFrPath).then((response) => response.text()).then((text) => {
      this.setState({ terms: text })
    })
  }

  render() {
    return (
      <div className="content">
        <ReactMarkdown source={this.state.terms} />
      </div>
    )
  }
}

export default Terms
11
Dorian

Vous devez utiliser react-markdown au lieu de réponse acceptée , cette solution n'utilise pas dangerouslySetInnerHTML.

App.js

import React, { Component } from 'react';
import AppMarkdown from './App.md';
import ReactMarkdown from 'react-markdown';

class App extends Component {

  constructor() {
    super();
    this.state = { markdown: '' };
  }

  componentWillMount() {
    // Get the contents from the Markdown file and put them in the React state, so we can reference it in render() below.
    fetch(AppMarkdown).then(res => res.text()).then(text => this.setState({ markdown: text }));
  }

  render() {
    const { markdown } = this.state;
    return <ReactMarkdown source={markdown} />;
  }
}

export default App;

App.md

# React & Markdown App
* Benefits of using React... but...
* Write layout in Markdown!
2
Kevdev

Si vous utilisez Webpack (c'est-à-dire Boilerplate ), vous pouvez enregistrer quelques étapes à l’aide des chargeurs Webpack.

npm i -D html-loader markdown-loader marked

Dans webpack.config.renderer.dev.js:

import marked from 'marked';
const markdownRenderer = new marked.Renderer();

....

  // Markdown
  {
    test: /\.md$/,
    use: [
      {
        loader: 'html-loader'
      },
      {
        loader: 'markdown-loader',
        options: {
          pedantic: true,
          renderer: markdownRenderer
        }
      }
    ]
  }

Ensuite, dans le composant React, il s’agit simplement d’exiger et de définir le code HTML.

import knownIssues from '../assets/md/known-issues.md';
....
<p dangerouslySetInnerHTML={{ __html: knownIssues }} />

Enfin, Flow signalera une erreur (cela fonctionne toujours) lors de l’importation du fichier de démarquage. Ajoutez ceci à .flowconfig pour que Flow traite les fichiers md comme des actifs de chaîne (en charge de Webpack):

module.name_mapper.extension='md' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow'
0
Caylan Van Larson

markdown-to-jsx fournit une fonctionnalité très efficace pour interagir avec le démarquage dans le composant React.

Il permet de remplacer/remplacer tout élément HTML par votre composant personnalisé pour le démarquage, voici le doc .

import React, { Component } from 'react'
import Markdown from 'markdown-to-jsx';
import README from './README.md'

class PageComponent extends Component {
  constructor(props) {
    super(props)

    this.state = { md: "" }
  }

  componentWillMount() {
    fetch(README)
      .then((res) => res.text())
      .then((md) => {
        this.setState({ md })
      })
  }

  render() {

    let { md } = this.state

    return (
      <div className="post">
        <Markdown children={md}/>
      </div>
    )
  }
}

export default PageComponent
0
Nishchit Dhanani