React.js ◯◯.jsx render() { return内にて変数に代入したhtmlタグが文字列として認識されてしまう

Question

【知りたいこと】
１． htmlタグを代入した変数を文字列ではなく、htmlタグとして認識させる方法を知りたい。
２． 例えば表示したいhtmlタグが、<div>・・・</div>であった場合で、条件により外側に<a href="・・・"></a>を加えたい場合、以下のような重複する冗長なコード以外の書き方を避けた書き方を知りたい。

if (条件A) {
 <a href="・・・"><div>・・・</div></a>
} else {
 <div>・・・</div>
}

【躓いているところ】
React.jsのrender内のreturn内にて、{htmlタグを代入した変数}を
{◯◯}と記載するとhtmlタグとして認識せず、文字列として認識されてしまいます。
【具体的なコード 以下◯◯.jsx】

・・・
render () {
 var htmlTag = null;
 if (条件A) {
  htmlTag += <a href="・・・">
 }
 htmlTag += <div>・・・</div>
 if (条件A) {
  htmlTag += </a>
 }
 return (<div>
  {htmlTag}
 </div>
 );
}

Answer 1

そもそもそのコード、ちゃんとトランスパイルできますか？Babelでちょっと試したところ、エラーになるのですが、あってますか？

まず、JSX表記について、これはHTML風に書ける方法であってHTMLを直接書ける訳ではありません。<a href="・・・">は「<a href="・・・">」というHTMLを書いているわけではないのです。

例えば、下記のコードは

var a = (
  <a href="#">
    <span>
      <img src="abc.png"/>
    </span>
  </a>
);

下記のように変換されます。

var a = React.createElement(
  "a",
  { href: "#" },
  React.createElement(
    "span",
    null,
    React.createElement("img", { src: "abc.png" })
  )
);

Babelでどうなるかを実際に見てみると良いでしょう。

意識すべきは、変換後のコードがどうなるかです。変換後のコードを見ればわかるとおり、開始タグと終了タグはセットであり、分離できません。開始タグから終了タグまでは通常のJavaScriptではありません。開始タグだけ用意して、後から終了タグを付けることはできません。

コードを書き直すのであれば、開始タグと終了タグを分離しないようにすべきでしょう。

var htmlTag;
if (条件A) {
  htmlTag = (
    <a href="・・・">
      <div>・・・</div>
    </a>
  );
} else {
  htmlTag = <div>・・・</div>;
}

Comments

[kazuyu]

記載コードは、部分部分抜粋して記述したものなので
コンパイルはしていません。

助言及び丁寧な開設ありがとうございます。
タグを分離しての代入は不可とのプロからの事実確認ができただけも
大変助かりました。