ReactJS で生の HTML をレンダリングする
React フレームワークの多様性と柔軟性は強調しすぎることはありません。ユーザーが React 内で HTML コードをレンダリングできる機能のおかげで、開発者として React を採用する前に、React を深く学ぶ必要はありません。
HTML で多くのコードを記述し、それを React に取り込むための最速の方法を探している人のために、このチュートリアルではこれを行うためのさまざまな方法を紹介します。
オンライン HTML から JSX へのコンバーター
この方法は、映画や曲のダウンロードが困難だったときに、オンラインメディア変換 Web サイトを最初に発見したときの思い出をもたらします。
Web サイト（"https://transform.tools/html-to-jsx"）は、純粋な HTML コードを JSX（JavaScript Syntax Extension）に変換するため、react フレームワーク内で使用できるようになります。
コードスニペット-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;
.App div 内でコードをラップし、複数の要素が含まれているため、フラグメント内でコードをラップします。
組み込みの ReactDOM.render() メソッドを使用する
このメソッドを使用すると、HTML コードを最も純粋な形式で使用できます。ReactDOm.render() を使用すると、指定した HTML コードを表示できます。
また、新しい React アプリを正常に作成すると、ReactDOM.render() がプレインストールされるため、追加の依存関係は必要ありません。ReactDOM.remder() は、軽い反応アプリを作成するための理想的なメソッドです。
react プロジェクトの index.js ファイル内に移動し、const myelement を宣言します。
コードスニペット-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'));
要素を宣言した後、以下に移動して、ReactDOM.render() 内に要素を追加し、コードをフラグメントタグでラップしていることを確認します。
-Method.webp)
dangerouslySetInnerHTML メソッドを使用する
これは、react フレームワークで HTML を未加工の状態でレンダリングするための最も一般的な方法です。このメソッドは、このメソッドのセキュリティの脆弱性をユーザーに警告します。
dangerouslySetInnerHTML メソッドを使用すると、攻撃者はフォーム送信 Web サイトの検索から送信されたデータ内に悪意のあるスクリプトを保存できます。
コードスニペット-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;
最初に const を使用してコンポーネントを宣言し、次に HTML コードをバッククォートでラップします。次に、dangerouslySetInnerHTML を宣言し、data コンポーネントを中括弧で囲みます。
まとめ
これらの方法は、厳密なコースを経ることなく、React に慣れるための刺激的な道を作ります。しかし、そのようなアプローチの欠点は、伸縮性のあるコードが生成されることです。これは、そもそも反応フレームワークを作成する本当の理由を何とか打ち負かします。
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