Question

在我的Home.js组件中，以下代码：


import React from 'react';
import ReactMarkdown from 'react-markdown';
import HomepageMarkdown from '../../markdown/homepage.md';
import Image from '../../markdown/image.md';
import './homepage.css'

class Homepage extends React.Component{
    constructor(){
        super();
        this.state = { 
            markdown : '', 
            markdwonimage : ''
        };
    }

    componentWillMount() {
        fetch(HomepageMarkdown).then(res => res.text()).then(text => this.setState({ markdown: text }));
        fetch(Image).then(res => res.text()).then(text => this.setState({ markdwonimage: text }));
    }

    render(){
        const { markdown, markdwonimage } = this.state;
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <ReactMarkdown source={markdwonimage} />
                    </div>
                    <div className="col-md-6 content-section">
                        <ReactMarkdown source={markdown} />
                        <div className="publish">
                            <div className="publish-date">
                                <p>16 Juni 2019</p>
                            </div>
                            <div className="publish-detail">
                                <p>Selengkapnya ></p>
                            </div>
                        </div>         
                    </div>
                </div>
            </div>
        )
    }
}

export default Homepage

如何在ReactJS组件中加载更多.md文件？例如，当我在我的Home.js文件中的markdown文件夹中自动添加.md文件时，就会渲染更多markdown文件

Answer 1

React在客户端运行，这意味着它不可能知道组件文件夹中的文件。您应该研究的是创建NodeJS服务，该服务将使用文件系统扫描目录中的所有md文件，然后根据您将从React应用程序发出的GET请求返回其内容。然后，您可以在应用程序中处理响应数据。阅读内容：on creating simple rest API using NodeJS and Express和NodeJS file system

首先，我在组件中创建Home.js，然后尝试在home组件中渲染markdown

1 个答案: