web-dev-qa-db-de.com

Reagieren: Wie wird eine externe HTML-Datei geladen und gerendert?

Ich baue eine kleine Blog-App mit React und Redux. Das Blog zeigt die Posts-Seite mit Titel, Autor, Tags und Beschreibung eines Posts. Wenn Sie auf den Titel oder die Schaltfläche "Lesen" klicken, möchte ich eine HTML-Datei mit dem entsprechenden Beitrag aus dem Datenordner eines lokalen Projekts mit allen Beiträgen laden und rendern.

Redux verwaltet den Status des Blogs und lädt die erste Datei posts.json mit 8 verschiedenen Beiträgen, einschließlich htmlPath für die entsprechende html-Datei im Datenordner.

15
Intermundos

Ich sehe das so, dass Sie hier zwei Probleme lösen müssen. Die erste ist, wie Sie den innerHTML eines Elements in React festlegen. Das andere ist, wie man ein bestimmtes HTML zum Rendern erhält, abhängig von einer gegebenen Variablen (z. B. der aktuellen Route, der Eingabe eines Textfelds usw.).

1. Setzen Sie den innerHTML eines Elements

Sie können dies mit der Variable dangerouslySetInnerHTML tun. Wie der Name andeutet, wird innerHTML des besagten Elements auf das gesetzt, was Sie angeben ... und ja, das "gefährlich" ist genau, da Sie vor der Verwendung dieser Funktion zweimal nachdenken müssen.

Die Official Documentation lautet wie folgt:

Die unsachgemäße Verwendung der innerHTML kann Sie für einen Cross-Site-Scripting-Angriff (XSS) öffnen. Die Bereinigung von Benutzereingaben für die Anzeige ist bekanntermaßen fehleranfällig, und die nicht ordnungsgemäße Bereinigung ist eine der Hauptursachen für Web-Schwachstellen im Internet.

Schauen Sie sich diese Demo oder den folgenden Ausschnitt an.

var Demo = React.createClass({

  getInitialState: function() {
    return {showExternalHTML: false};
  },
  
  render: function() {
    return (
      <div>
        <button onClick={this.toggleExternalHTML}>Toggle Html</button>
        {this.state.showExternalHTML ? <div>
          <div dangerouslySetInnerHTML={this.createMarkup()} ></div>
        </div> : null}
      </div>
    );
  },
  
  toggleExternalHTML: function() {
    this.setState({showExternalHTML: !this.state.showExternalHTML});
  },
  
  createMarkup: function() { 
    return {__html: '<div class="ext">Hello!</div>'};
  }

});

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);
.ext {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background: green;
  color: white;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>


2. Abrufen des HTML-Codes von einer externen Quelle

Beachten Sie, dass das obige Beispiel den HTML-Code nicht tatsächlich aus einer externen Datei abruft, sondern direkt als Zeichenfolge eingegeben wird. 

Eine einfache Möglichkeit zum dynamischen Abrufen einer select-Datei ist, dass das Backend (z. B. PHP) die Datei aus einem lokalen Ordner liest, den Text analysiert und es durch eine AJAX - Anforderung zurücksendet.

Beispiel

//Your React component
fetchExternalHTML: function(fileName) {
  Ajax.getJSON('/myAPI/getExternalHTML/' + fileName).then(
    response => {
      this.setState({
        extHTML: response
      });
    }, err => {
      //handle your error here
    }
  );
}
17
Chris

Während Chris 'Antwort gut war, war noch ein bisschen mehr zu graben, damit alles funktioniert. Hier sind die Schritte, die Sie ausführen müssen:

Fügen Sie Ihrem Projekt den HTML-Loader hinzu:

npm i -D html-loader

Fügen Sie der Datei webpack.config die folgende Regel hinzu:

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Nun können Sie Ihre HTML-Datei wie folgt importieren:

import React, { Component } from 'react';
import Page from './test.html';
var htmlDoc = {__html: Page};

export default class Doc extends Component {
  constructor(props){
    super(props);
  }

  render(){
     return (<div dangerouslySetInnerHTML={htmlDoc} />)
}}
7
iMad

Sie können versuchen, reagieren Sie Vorlagen . Dies ist "das Beste". Sie können Ihre Vorlage als externe Datei haben und sie jederzeit laden, und sie wird mit der verfügbaren React-API wie ein Zauber dargestellt.

Ich hoffe es hilft.

0
Pranesh Ravi