HTMLをテンプレート化する際に必要な修正【React】

概要

htmlをreactでテンプレート化しようと思うと、タグや属性の修正をかなり求められます。

今回は事例を一覧で紹介していきます。

コード

以下のようなコードでテンプレート化するとします

const Content = () => {
    return (
         <>
         <div className="test">
              <p>テスト</p>
        </div>
        以降、HTMLテンプレート・・・
    );
};

export default Content;

修正の必要なHTMLタグや属性

class => className

<div className = "sample"></div>

for => htmlFor

<label htmlFor="sample"></label>

xlink:href => xlinkHref

<image xlinkHref="sample.svg" />

コメントアウトを「{/**/}」にする(「//」は)不可

{/* コメントアウト */}

閉じタグがない場合は末尾に”/”をつける

<image src="sample.png" />
<br/>
<input type="text" />

style属性の区切りを”-“からキャメルケースにする

<div style="fontSize: 16px;">

onclick=>onClick

<button type=”button” onClick={test}>テスト</button>

※関数testは以下のように定義

const test = () => {
     console.log("クリック");
};

他にも開発していて発見したものがあれば追記していきます。

所感

HTMLをreactでテンプレート化する際には、想定したよりもおおくのタグ・属性の修正を求められました。

class→classNameのように一括置換できるものはよいのですが、閉じタグ等の修正は少々面倒ですね・・・。

調べてみた感じ自動で一括置換するツールやライブラリは発見できませんでした。

ご存知の方いたら教えてください!

コメント

タイトルとURLをコピーしました