首先，我在组件中创建Home.js，然后尝试在主组件中呈现标记

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服务，它将使用文件系统来扫描你的目录中的所有多维文件，然后返回它们的内容作为你将从你的React应用程序发出的GET请求的结果。然后在你的应用程序中处理你那端的响应数据。阅读：on creating simple rest API using NodeJS and Express和NodeJS file system