Rendern rohes HTML mit ReactJS
- Online-HTML-zu-JSX-Konverter
-
Verwenden Sie die eingebaute
ReactDOM.render()-Methode -
Verwenden Sie die
dangerouslySetInnerHTML-Methode - Fazit
Die Vielseitigkeit und Flexibilität des React-Frameworks kann nicht genug betont werden. Sie müssen React nicht einmal zu tiefgehend lernen, bevor Sie es als Entwickler aufgreifen können, dank seiner Fähigkeit, die es Benutzern ermöglicht, HTML-Codes in React zu rendern.
Für diejenigen, die viel Code in HTML geschrieben haben und nach dem schnellsten Weg suchen, ihn zu React zu übertragen, werden wir in diesem Tutorial verschiedene Möglichkeiten besuchen, um dies zu tun.
Online-HTML-zu-JSX-Konverter
Diese Methode weckt Erinnerungen an die Zeit, als ich zum ersten Mal Websites zum Konvertieren von Online-Medien entdeckte, als Filme und Lieder schwer herunterzuladen waren.
Die Website ("https://transform.tools/html-to-jsx") wandelt reinen HTML-Code in JSX (JavaScript Syntax Extension) um, sodass er innerhalb des React-Frameworks verwendet werden kann.
Codeschnipsel - App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="goog.css" />
<title>Google</title>
<header>
<nav className="navi">
<div id="left">
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Stores</a>
</li>
</ul>
</div>
<div id="right">
<ul>
<li>
<a href="#">Gmail</a>
</li>
<li>
<a href="#">Images</a>
</li>
<li>
<a href="#">Social</a>
</li>
<li>
<button type="submit">Sign In</button>
</li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div className="google-logo">
<img
src="googlelogo_color_272x92dp.png"
alt="google-logo"
id="logo"
width={272}
height={92}
/>
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL" />
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav className="footer">
<div id="left-foot">
<ul>
<li>
<a href="#">Advertising</a>
</li>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">How Search Works</a>
</li>
</ul>
</div>
<div id="right-foot">
<ul>
<li>
<a href="#">Privacy</a>
</li>
<li>
<a href="#">Terms</a>
</li>
<li>
<a href="#">Settings</a>
</li>
</ul>
</div>
</nav>
</footer>
</>
</div>
);
}
export default App;
Wir packen die Codes in das Div .App und stellen dann sicher, dass es in Fragmente gepackt wird, da es mehrere Elemente enthält.
Verwenden Sie die eingebaute ReactDOM.render()-Methode
Mit dieser Methode können Sie die HTML-Codes in ihrer reinsten Form verwenden. Das ReactDOm.render() ermöglicht es uns, die von uns angegebenen HTML-Codes anzuzeigen.
Außerdem ist ReactDOM.render() vorinstalliert, sobald wir erfolgreich eine neue React-App erstellt haben, sodass keine zusätzlichen Abhängigkeiten erforderlich sind. Das ReactDOM.remder() ist eine ideale Methode zum Erstellen von Lichtreaktions-Apps.
Wir gehen in die Datei index.js des React-Projekts und deklarieren ein const myelement.
Codeschnipsel - index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const myelement = (
<>
<title>Google</title>
<body>
<header>
<nav class="navi">
<div id="left">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Social</a></li>
<li><button type="submit">Sign In</button></li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div class="google-logo">
<img src="googlelogo_color_272x92dp.png" alt="google-logo" id="logo" height="92" width="272"/>
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL"/>
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav class="foot">
<div id="left-foot">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
</div>
<div id="right-foot">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</>
);
ReactDOM.render(myelement, document.getElementById('root'));
Nachdem wir unser Element deklariert haben, fügen wir das Element unten in ReactDOM.render() ein und stellen sicher, dass wir die Codes in Fragment-Tags verpacken.
-Method.webp)
Verwenden Sie die dangerouslySetInnerHTML-Methode
Dies ist die beliebteste Methode, um HTML im Rohzustand auf dem React-Framework zu rendern. Diese Methode warnt den Benutzer vor der Sicherheitslücke dieser Methode.
Die dangerouslySetInnerHTML-Methode ermöglicht es Angreifern, bösartige Skripte in den Daten zu speichern, die von der Suche nach Formular sendenden Websites gesendet werden.
Codeschnipsel - App.js:
import logo from './logo.svg';
import './App.css';
const App = () => {
const data =
<body>
<header>
<nav class="navi">
<div id="left">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Social</a></li>
<li><button type="submit">Sign In</button></li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div class="google-logo">
<img src="googlelogo_color_272x92dp.png" alt="google-logo" id="logo" height="92" width="272">
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL">
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav class="foot">
<div id="left-foot">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
</div>
<div id="right-foot">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</nav>
</footer>
</body>
;
return (
<div
dangerouslySetInnerHTML={{ __html: data }}
/>
);
}
export default App;
Wir deklarieren unsere Komponente zuerst mit const und packen dann die HTML-Codes in Backticks. Dann deklarieren wir das dangerouslySetInnerHTML und packen unsere data-Komponente in die geschweiften Klammern.
Fazit
Die Methoden schaffen einen spannenden Weg, sich mit React vertraut zu machen, ohne strenge Kurse durchlaufen zu müssen. Der Nachteil eines solchen Ansatzes ist jedoch, dass er zu dehnbaren Codes führt, was den eigentlichen Grund für die Erstellung des React-Frameworks überhaupt zunichte macht.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn