概要
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のように一括置換できるものはよいのですが、閉じタグ等の修正は少々面倒ですね・・・。
調べてみた感じ自動で一括置換するツールやライブラリは発見できませんでした。
ご存知の方いたら教えてください！
コメント