Wie kann ich HTML aus einer anderen Datei in einer React-Komponente rendern?

Lesezeit: 3 Minuten

Benutzer-Avatar
Emir Marken

Ist es möglich, HTML aus einer anderen Datei in einer React-Komponente zu rendern?

Ich habe folgendes versucht, aber es funktioniert nicht:

var React = require('react');

/* Template html */
var template = require('./template');

module.exports = React.createClass({
    render: function() {
        return(
            <template/>
        );
    }
});

  • Sie müssen Großbuchstaben für benutzerdefinierte Komponenten verwenden, also umbenennen template zu Template und dann zurückgeben als <Template />

    – Eisgurke

    28. November 2015 um 16:45 Uhr


  • Ich nehme an, wenn Sie “HTML” sagen, meinen Sie wirklich JSX?

    – Felix Klinge

    28. November 2015 um 16:46 Uhr

  • @Icepickle Ich bekomme diesen Fehler: Uncaught Error: Cannot find module „./template“

    – Emir Marques

    28. November 2015 um 16:49 Uhr

  • Logisch, ich bekomme das pro Datei, ist nicht jsx und enthält nicht “module.exports = any”. Kann ich eine HTML-Datei mit einem anderen Formular importieren?

    – Emir Marques

    28. November 2015 um 16:51 Uhr

  • Nun, das Modul muss existieren, um es importieren zu können. Ich bin mir nicht sicher, was Ihr zweiter Kommentar bedeuten soll. Bitte bearbeiten Sie Ihre Frage und fügen Sie alle relevanten Informationen hinzu. Mit 1.000 Wiederholungen sollten Sie wissen, wie man eine Frage richtig schreibt. Wenn nicht, hier ist eine Erinnerung: Wie man fragt

    – Felix Klinge

    28. November 2015 um 16:52 Uhr


Benutzer-Avatar
Dan Prinz

Wenn dein template.html Datei nur HTML und keine React-Komponente ist, dann können Sie sie nicht so anfordern, wie Sie es mit einer JS-Datei tun würden.

Wenn Sie jedoch Browserify verwenden, wird eine Transformation aufgerufen besaiten Dadurch können Sie Nicht-JS-Dateien als Zeichenfolgen anfordern. Sobald Sie die Transformation hinzugefügt haben, können Sie HTML-Dateien anfordern und sie werden exportiert, als wären sie nur Zeichenfolgen.

Sobald Sie die HTML-Datei angefordert haben, müssen Sie die HTML-Zeichenfolge mithilfe von in Ihre Komponente einfügen dangerouslySetInnerHTML Stütze.

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

Dies widerspricht jedoch vielem, worum es bei React geht. Es wäre natürlicher, Ihre Vorlagen als React-Komponenten mit JSX zu erstellen, anstatt als normale HTML-Dateien.

Die JSX-Syntax macht es trivial einfach, strukturierte Daten wie HTML auszudrücken, insbesondere wenn Sie verwenden zustandslose Funktionskomponenten.

Wenn dein template.html Datei sah in etwa so aus

<div class="foo">
  <h1>Hello</h1>
  <p>Some paragraph text</p>
  <button>Click</button>
</div>

Dann könnten Sie es stattdessen in eine JSX-Datei konvertieren, die so aussah.

module.exports = function(props) {
  return (
    <div className="foo">
      <h1>Hello</h1>
      <p>Some paragraph text</p>
      <button>Click</button>
    </div>
  );
};

Dann können Sie es anfordern und verwenden, ohne es stringifizieren zu müssen.

var Template = require('./template');

module.exports = React.createClass({
  render: function() {
    var bar="baz";
    return(
      <Template foo={bar}/>
    );
  }
});

Es behält die gesamte Struktur der Originaldatei bei, nutzt jedoch die Flexibilität des Props-Modells von React und ermöglicht im Gegensatz zu einer normalen HTML-Datei eine Syntaxprüfung zur Kompilierzeit.

  • Es funktioniert, funktioniert aber nicht mit Material-UI. Meine HTML-Datei enthält TextField und nicht rendern

    – Emir Marques

    29. November 2015 um 14:04 Uhr

  • Tut mir leid, ich folge nicht. Welchen Ansatz hast du probiert? Liegt ein Fehler vor? Vielleicht wäre es hilfreich, Ihre HTML-Datei in Ihre Frage aufzunehmen.

    – Dan Prinz

    29. November 2015 um 14:05 Uhr

  • Ich erhalte eine Fehlermeldung: Uncaught (in Promise) Error: Module parse failed: C:\Users\….\target.html Unexpected token (1:0) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. | | ; |

    – Zack Zilic

    11. Juni 2018 um 8:45 Uhr

  • müssen Sie ->npm install xxxx<- oder irgendetwas in web.confing ändern??

    – Zack Zilic

    11. Juni 2018 um 8:46 Uhr

  • @ZackZilic Sie müssen installieren HTML-Loader und konfigurieren Sie es dann in Ihrer Webpack-Konfigurationsdatei.

    – Dan Prinz

    11. Juni 2018 um 13:43 Uhr

Benutzer-Avatar
Jon Surell

Du kannst den … benutzen dangerouslySetInnerHTML -Eigenschaft zum Einfügen von beliebigem HTML:

// Assume from another require()'ed module:
var html="<h1>Hello, world!</h1>"

var MyComponent = React.createClass({
  render: function() {
    return React.createElement("h1", {dangerouslySetInnerHTML: {__html: html}})
  }
})

ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'))
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>

Sie könnten dieses Vorlagenverhalten sogar in Komponenten zerlegen (ungetestet):

class TemplateComponent extends React.Component {
  constructor(props) {
    super(props)
    this.html = require(props.template)
  }

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

}

TemplateComponent.propTypes = {
  template: React.PropTypes.string.isRequired
}

// use like
<TemplateComponent template="./template.html"/>

Und damit template.html (im selben Verzeichnis) sieht in etwa so aus (wieder ungetestet):

// ./template.html
module.exports="<h1>Hello, world!</h1>"

  • Danke für die Antwort. Ich erhalte diesen Fehler: Uncaught Error: Cannot find module ‘template.html’.

    – Emir Marques

    28. November 2015 um 19:43 Uhr

  • Sie müssen den richtigen Pfad zu Ihrer Vorlage angeben. Ich habe meine Antwort aktualisiert, um zu zeigen, ob template.html befindet sich im selben Verzeichnis.

    – Jon Surrell

    28. November 2015 um 20:17 Uhr

Sie können dies mit DangerlySetInnerHTML tun:

import React from 'react';
function iframe() {
    return {
        __html: '<iframe src="./Folder/File.html" width="540" height="450"></iframe>'
    }
}


export default function Exercises() {
    return (
        <div>
            <div dangerouslySetInnerHTML={iframe()} />
        </div>)
}

HTML-Dateien müssen im Öffentlichkeit Mappe

Benutzer-Avatar
Iwan

Es ist üblich, Komponenten zu haben, die nur von Requisiten rendern. So was:

class Template extends React.Component{
  render (){
    return <div>this.props.something</div>
  }
}

Dann importieren Sie in Ihrer übergeordneten Komponente, in der Sie die Logik haben, einfach die Vorlagenkomponente und übergeben die erforderlichen Requisiten. Ihre gesamte Logik bleibt in der übergeordneten Komponente und die Vorlage wird nur gerendert. Dies ist ein möglicher Weg, um “Vorlagen” wie in Angular zu erreichen.

Es gibt keine Möglichkeit, eine .jsx-Datei nur mit jsx zu haben und sie in React zu verwenden, da jsx nicht wirklich HTML ist, sondern Markup für ein virtuelles DOM, das React verwaltet.

Benutzer-Avatar
Allan

Sie könnten dies tun, wenn die Vorlage eine Reaktionskomponente ist.

Vorlage.js

var React = require('react');

var Template = React.createClass({
    render: function(){
        return (<div>Mi HTML</div>);
    }
});

module.exports = Template;

MainComponent.js

var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require("react-tap-event-plugin");
var Template = require('./Template');

//Needed for React Developer Tools
window.React = React;

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

var MainComponent = React.createClass({
    render: function() {
        return(
            <Template/>
        );
    }
});

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(
  <MainComponent />,
  document.getElementById('app')
 );

Und wenn Sie Material-UI verwenden, verwenden Sie aus Kompatibilitätsgründen Material-UI-Komponenten, keine normalen Eingaben.

Benutzer-Avatar
nein25

i-frame src akzeptiert nur HTTP-Protokolle. Wenn Sie also statisches HTML von Ihrem Computer laden, lautet die Browser-URL wahrscheinlich „file: //home/myComputer/localOfFiles/myHTMLfile.html“ und der richtige Pfad sollte „http://localhost:3000/myHTMLfile .html”.

Sie müssen keine Erweiterung oder irgendetwas anderes verwenden, Sie verschieben einfach eine myHTMLfile.html in Ihren öffentlichen Ordner im React-Code und versuchen diesen Pfad “http://localhost:3000/myHTMLfile.html”. Diese Lösung ist von hier ausgeliehen (funktionierte für mich, obwohl sie für das Rendern von PDF-Dateien dient) –

https://github.com/wojtekmaj/react-pdf/issues/300#issuecomment-846226460

1015880cookie-checkWie kann ich HTML aus einer anderen Datei in einer React-Komponente rendern?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy