Question

我正在从我的API提供一些内容。我想在我的React组件中显示来自API的响应。响应是html，并通过webpack捆绑了所有资产。

我该怎么办？

我尝试了dangerouslySetInnerHTML，但是它使返回的html内的JavaScript崩溃了。

我的cmp：

import React, { Component } from 'react';
import axios from 'axios';

export default class Report extends Component {
constructor() {
    super();
    this.state = {
        id: null,
        report: null
    };
}

getParam(param){
    return new URLSearchParams(window.location.search).get(param);
}

componentWillMount() {
    axios.post(`/url`,
        {
            'id': this.getParam('id'),
        }
    )
        .then(res => {
            this.setState({id: res.data});
            setTimeout(() => {
                axios.get(`https://rg.ovh/`+this.state.id)
                    .then(res => {
                        this.setState({report: res.data})
                    });
            }, 1900);
        });
}

render() {
    return (
        <div dangerouslySetInnerHTML={ {__html: this.state.report} } />
    );
}

}

Answer 1

import axios from 'axios';
import React, { Component } from 'react';
import renderHTML from 'react-render-html';

class App extends Component {
  constructor() {
    super();
    this.state = {
      htmlString: ''
    };
  }

  componentDidMount() {
    axios.get('http://localhost:5000').then(response => {
      this.setState({ htmlString: response.data })
    }).catch(err => {
      console.warn(err);
    });
  }

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

    return (
      <div className="App">
        {renderHTML(htmlString)}
      </div>
    );
  }
}

export default App;

在react组件中渲染整个html文件

1 个答案: