VueプロジェクトでReactを書く方法の詳細

// インデックス.vue
<テンプレート>
  <div class="wrapper">
    <共通:opt="リスト" />
  </div>
</テンプレート>
 
<script lang="ts">
「vue-property-decorator」から Component、Vue をインポートします。
「./components/Common」からCommonをインポートします。

@成分（{
  名前:「アプリ」、
  コンポーネント:
    一般、
  },
})
デフォルトクラスAppをエクスポートし、Vueを拡張します。
  private list = ["Taobaoに行きたい"、"Baiduに行きたい"、"JDに行きたい"];
}
</スクリプト>

'vue' から CreateElement をインポートします。
'vue-property-decorator' から { Component, Vue, Prop } をインポートします。

@成分（{
    名前: 'Common'
})
デフォルトのクラスCommonをエクスポートし、Vueを拡張します。
    @Prop(Object) オプション: 任意[]

    レンダリング(h: CreateElement) {
        戻る <span>
            {
                this.opt.map((it) => {
                    <span style="marginRight:10px">{it}</span> を返します
                })
            }
        </span>
    }
}

// 上記のindex.vueのデータを変換する

  プライベートリスト = [
    { render: () => ["a", { style: { color: "red" } }, "Taobaoに行きたい"] },
    { render: () => ["a", { style: { color: "green" } }, "JDに行きたいです。"] },
    { render: () => ["a", { style: { color: "pink" } }, "Baiduに行きたい"] },
  ];

  {
                this.opt.map((it) => {
                    h(...it.render()) を返します
                })
            }

// tsx 変換 <span>
            {
                this.opt.map((it) => {
                    it.render(h) を返します
                })
            }
</span>


index.vue ページでこれを実行できます。
// インデックス.vue
プライベートリスト = [
    {
      レンダリング: (h: CreateElement) =>
        h("a", { style: { color: "red", marginRight: "5px" } }, "Taobaoに行きたい"),
    },
    {
      レンダリング: (h: CreateElement) =>
        h("a", { style: { color: "green", marginRight: "5px" } }, "JDに行きたい"),
    },
    {
      レンダリング: (h: CreateElement) =>
        h("a", { style: { color: "pink", marginRight: "5px" } }, "Baiduに行きたい"),
    },
  ];

// index.vue 変換 {
      レンダリング: (h: CreateElement) =>
        h(
          "h1",
          {
            スタイル: { 色: "緑", 右余白: "5px" },
          },
          「JDに行きます。」
        ）、
    },

// インデックス.vue
プライベートリスト = [
   {
      レンダリング: (h: CreateElement) =>
        h(
          「あ」、
          {
            スタイル: { 色: "赤", 右余白: "5px" },
            の上： {
              クリック: () => this.iWillGoWhere("TB"),
            },
          },
          「タオバオに行きたい」
        ）、
   }]
   
 iWillGoWhere(型: 文字列) {
    const goWhere: 任意 = {
      TB: () => {
        alert("Taobaoに行きます!");
      },
      JD: () => {
        alert("JDに行きます!");
      },
      BD: () => {
        alert("Baiduに行きたい!");
      },
    };
    goWhere[type]();
  }