Рендеринг всего HTML-файла в компоненте реакции - PullRequest
0 голосов
/ 18 декабря 2018

Я передаю некоторый контент из моего API.Я хочу отобразить ответ от API в моем компоненте реакции.Ответ html со встроенными всеми активами, встроенными через веб-пакет.

Как я могу это сделать?

Я пытался dangerouslySetInnerHTML, но он вылетает из-за моего javascript внутри возвращенного html.

Мой 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} } />
    );
}

}

1 Ответ

0 голосов
/ 18 декабря 2018
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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...