react读取静态文件

Posted zealousness

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react读取静态文件相关的知识,希望对你有一定的参考价值。

react中,使用发送请求的方式把static文件夹中的前端可访问的静态文件读取成字符串:

import React, { Component } from ‘react‘;

import { getRequestHeaders } from ‘../setupAjaxHeaders‘;
import HyperDown from ‘hyperdown‘;

import ‘./ReadMePage.css‘;


class ReadMePage extends Component {
    constructor(props){
        super(props);
this.state={ readmehtml:undefined, }; } render(){ const getArtifactRequest = new Request(require(‘../static/readme.md‘), { method: ‘GET‘, headers: new Headers(getRequestHeaders(document.cookie)) }); fetch(getArtifactRequest).then((response) => { return response.text() }).then((text) => { const parser=new HyperDown; this.state.readmeHtml=parser.makeHtml(text); this.setState({ readmeHtml:parser.makeHtml(text), }); return <div id="readMeBody" dangerouslySetInnerHTML={{__html:this.state.readmeHtml}}></div>; }); return <div id="readMeBody" dangerouslySetInnerHTML={{__html:this.state.readmeHtml}}></div>; } } export default ReadMePage;

 

注意,要保存代码中动态生成的结果,必须在构造函数中定义 this.state={resultname:undefined, } 并在生成结果时调用this.setstate({ resultname:result, }),然后后续调用的时候使用this.state.resultname

 

注意,request获取response之后,response.text()需要通过return再then才能获取到,直接使用是获取不到的

 

以上是关于react读取静态文件的主要内容,如果未能解决你的问题,请参考以下文章

Apollo 可以从缓存中读取部分片段吗?

solr分布式索引实战分片配置读取:工具类configUtil.java,读取配置代码片段,配置实例

前端开发工具vscode如何快速生成代码片段

前端开发工具vscode如何快速生成代码片段

支持动态或静态片段的不同屏幕尺寸?

“ES7 React/Redux/GraphQL/React-Native 片段”不适用于 javascript 文件。除了安装它,我还需要配置其他东西吗?