마크다운 파일을 리액트 컴포넌트에 로드하려면 어떻게 해야 합니까?
.md 마크다운파일을 리액트컴포넌트에 로드하려면 어떻게 해야 하나요?구글 검색을 통해 많은 npm 라이브러리를 시도했지만 좋은 해결책을 찾을 수 없습니다.
다음과 같은 .md 파일을 로드합니다.
render() {
<div>
<MarkDown src="about.md" />
</div>
}
를 사용한 완전한 작업 예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
처음에 다음과 같이 Import합니다.
import marked from "marked";
그런 다음 React에서 *.md 파일을 가져옵니다.componentDidMount이벤트 및 컴포넌트 상태로 저장하기 위해marked(text)(어디서)text응답 여부):
componentDidMount() {
const readmePath = require("./Readme.md");
fetch(readmePath)
.then(response => {
return response.text()
})
.then(text => {
this.setState({
markdown: marked(text)
})
})
}
...마지막으로 페이지 위에 렌더링합니다.dangerouslySetInnerHTML속성:
render() {
const { markdown } = this.state;
return (
<section>
<article dangerouslySetInnerHTML={{__html: markdown}}></article>
</section>
)
}
승인된 답변 대신 react-markdown을 사용해야 합니다. 이 솔루션에서는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!
markdown-to-jsx는 React 컴포넌트의 markdown과 상호 작용하는 매우 효율적인 기능을 제공합니다.
마크다운용으로 HTML 요소를 커스텀컴포넌트로 대체/덮어쓰기 할 수 있습니다.여기 문서가 있습니다.
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
21년 8월 2일 편집
기능 컴포넌트
const PageComponent = ()=> {
let [ content, setContent] = useState({md: ""});
useEffect(()=> {
fetch(README)
.then((res) => res.text())
.then((md) => {
setContent({ md })
})
}, [])
return (
<div className="post">
<Markdown children={content.md}/>
</div>
)
}
@Xing-Han-Lu의 답변과 비슷하지만 리액션 마크다운입니다.이 컨셉은useEffect파일을 로드하고 나서, 파일을 스테이트에 추가합니다.useState접근할 수 있는 곳에 걸다reactMarkdown
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import file from "./md/posts.md";
export default function () {
const [markdown, setMarkdown] = useState("");
useEffect(() => {
fetch(file)
.then((res) => res.text())
.then((text) => setMarkdown(text));
}, []);
return (
<>
<ReactMarkdown source={markdown} />
</>
);
}
웹 팩 로더를 사용한 접근법
로더 설치
npm install raw-loader --save-dev
webpack.config.js 업데이트
module.exports = {
//...
module: {
rules: [
// ...
{
test: /\.md$/,
use: "raw-loader",
},
],
},
};
마크다운 파일 작성(예:App.md)
# React & Markdown App
- Benefits of using React... but...
- Write layout in Markdown!
수입품App.mdReact 컴포넌트에 사용합니다.
import React from "react";
import ReactMarkdown from 'react-markdown';
import AppMarkdown from './App.md';
function App() {
return (
<div>
<ReactMarkdown children={`${AppMarkdown}`} />
</div>
);
}
export default App;
이 모든 답변에 어려움을 겪었던 것은 프런트 엔드 리액트에 마크다운 파일을 로드하는 것입니다.그들은 당신이 무엇을 사용하고 있는지에 대해 일종의 추측을 한다.
리액트의 세계에서는 MDX를 추천합니다.
Next.js와 함께 사용하고 있지만 MDX는 많은 Javascript 번들러 및 React 라이브러리와 호환되며 많은 사람들이 무시하는 부분인 비Js 구문을 처리하기 위해 많은 작업을 수행합니다.
주의: MDX는 테이블이나 펑키한 엑스트라 없이 오리지널 Markdown 스타일을 고수합니다.추가 정보가 필요한 경우 MDX 플러그인을 설치해야 합니다.
다음의 참고 자료를 참조해 주세요.
- https://stackoverflow.com/a/52265474/327074
- https://github.com/vercel/next.js/tree/canary/packages/next-mdx
- https://mdxjs.com/docs/using-mdx/ #mdx-content
설치 대상:
npm install @next/mdx @mdx-js/loader
next.config.js:
Next.js 통합의 경우 웹 팩 구성을 조작할 필요가 없습니다.기존의 패키징만 하면 됩니다.next.config.js와 함께withMDX기능:
/**
* @link https://github.com/vercel/next.js/tree/canary/packages/next-mdx#usage
*/
const withMDX = require('@next/mdx')()
// your existing next.config.js
const nextConfig = {
...
}
module.exports = withMDX(nextConfig)
about.mdx:
# Just some regular markdown
any old rubbish **will do**
You can stick extra <Funky /> stuff in here but *regular markdown* works fine
AboutPage.jsx:
하면 안 해 주세요.fetch 또는 inguseEffectJSON - JSON - JSON - JSON - JSON - JSON - JSON - JSON - JSON - JS - JSON - JS - JSON - JS
import React from "react";
import AboutMarkdown from "./about.mdx";
const AboutPage () => (
<AboutMarkdown />
);
Typescript + react의 경우 다음 단계를 따르십시오.
- 프로젝트 디렉토리 중 하나에 하나의 유형 정의(index.d.ts) 파일을 생성하고 다음 코드를 입력합니다.
declare module "*.md";
tsconfig.json -> CompilerOptions -> typeRoots과 같이
{
"compilerOptions": {
...
"typeRoots": [ "<types-directory-created-in-#1>", "./node_modules/@types"],
...
}
}
- 2개의 라이브러리 showdown과 html-react-parser를 설치합니다.
yarn add showdown ★★★★★★★★★★★★★★★★★」npm install showdown
yarn add html-react-parser ★★★★★★★★★★★★★★★★★」npm install html-react-parser
- 컴포넌트 내
import React, { useEffect, useState } from 'react';
import showdown from 'showdown';
import parse from 'html-react-parser';
import readme from 'path/filename.md';
export default function ComponentName() {
const [html, setHTML] = useState("");
//Use componentDidMount(): if class based component to load md file
useEffect(() => {
fetch(readme)
.then(data => data.text())
.then(text => {
const converter = new showdown.Converter();
setHTML(converter.makeHtml(text));
})
}, []);
return (
<div>{parse(html)}</div>
)
}
이 솔루션을 약간 수정하여 후크와useEffect은 (과) 다릅니다.componentWillUpdate의하고 create-react-app이라는 document.md은 다음과 수 , 、 다 、 , 、 다 、 다 、 다 、 , 、 , 、 , , 、
import { useState, useEffect } from 'react';
import Markdown from 'markdown-to-jsx';
import mdDocument from './document.md';
const App = () => {
const [content, setContent] = useState("");
useEffect(() => {
fetch(mdDocument)
.then(res => res.text())
.then(md => { setContent(md) })
})
return (
<div><Markdown children={content} /></div>
)
}
export default App;
https://stackoverflow.com/a/42928796/12271495 업데이트 버전
import React, { Component } from "react";
import { marked } from "marked";
class App extends Component {
state = {markdown: ""}
componentDidMount() {
const readmePath = require("./blogs/README.md");
fetch(readmePath)
.then((response) => {
return response.text();
})
.then((text) => {
this.setState({
markdown: marked.parse(text),
});
});
}
render() {
const { markdown } = this.state;
return (
<section>
<article dangerouslySetInnerHTML={{ __html: markdown }}></article>
</section>
);
}
}
export default App;
웹 팩(즉, 전자 반응 보일러 플레이트)을 사용하는 경우 웹 팩 로더를 사용하여 몇 가지 단계를 절약할 수 있습니다.
npm i -D html-loader markdown-loader marked
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
}
}
]
}
그 후 React 컴포넌트에서는 HTML을 설정하기만 하면 됩니다.
import knownIssues from '../assets/md/known-issues.md';
....
<p dangerouslySetInnerHTML={{ __html: knownIssues }} />
마지막으로 마크다운 파일을 Import 할 때 플로우는 오류를 보고합니다(계속 동작합니다).이를 .flowconfig에 추가하여 플로우가 MD 파일을 문자열 자산으로 취급하도록 합니다(Webpack 관리).
module.name_mapper.extension='md' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow'
위의 제안을 시도해보니 명령어를 실행한 후
> npm install markdown
import ReactMarkdown from 'markdown';
드디어 나에게 효과가 있었다
react-markdown을 사용한 동적 Import를 사용하여 작동하기를 원했습니다.일반 코드는 다음과 같습니다. 함수를 호출하고 함수 반환에 상태 변수에 대한 참조를 넣으려면 useEffect를 추가해야 합니다.
const [displayElement, setDisplayElement] = useState(null);
//Get markdown file
const fetchMarkdown = async (location) => {
console.log("MD location: ", location);
try {
//I figured out readmePath.default using print statements, left there in case
//someone wants them
const readmePath = await require("" + location);
//console.log(readmePath);
const response = await fetch(readmePath.default);
//console.log("response => ", response);
const text = await response.text();
//console.log(text);
// the state variable I am setting the markdown into, in my render function
// I have {displayElement}.
setDisplayElement(
<div className={styles.markdownContainer}>
<ReactMarkdown children={text} />
</div>
);
} catch (e) {
console.log("Markdown file: couldn't read =>", location, e);
}
};
빈 const readmePath = await require("" + location);필수입니다(hehe).내가 여기서부터 맡을게왜 효과가 있는지 모르겠어요.
또 다른 옵션은 backtick 문자를 사용하여 태그 없이 템플릿 리터럴로 마크다운을 둘러싸는 .js 파일에 마크다운을 넣는 것입니다.다음과 같이 합니다.
const MD = `
**TERMS OF SERVICE**
Last Modified: 30 November 2021...`
export default MD
후, 「 」를 할 수 있습니다.import이치노
언급URL : https://stackoverflow.com/questions/42928530/how-do-i-load-a-markdown-file-into-a-react-component
'programing' 카테고리의 다른 글
| CSS 변환 사용: React를 사용한 변환(...)JS (0) | 2023.03.14 |
|---|---|
| gs protocol의 의미는 무엇입니까? (0) | 2023.03.14 |
| angularjs ui-module - 앱 전체에서 글로벌한 마스터 상태를 구축하는 방법 (0) | 2023.03.14 |
| 캔 각도외부 앱에 의해 영구 모델(서버 데이터베이스)이 변경된 경우 JS에서 보기를 자동으로 업데이트하시겠습니까? (0) | 2023.03.14 |
| Oracle: 특정 범위에 걸쳐 "그룹화"하는 방법 (0) | 2023.03.14 |