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

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

jsx/tsxファイルを直接作成できます

今回のプロジェクト構成は以下のとおりです。

vueファイルではこのように使います

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

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

tsxはこう書いている

'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>
    }
}

ページをご覧ください

CreateElementも参照していることに気付いた方もいるかもしれません。これは何のためでしょうか?これはレンダリング関数と呼ばれます。 vue に関するこのような長い文書を読むのが嫌いな人は、ここを読んでください。簡単な説明: これはvnodeノードをレンダリングできます。テンプレートよりもコンパイラに近いです。それはどういう意味ですか?つまり、テンプレート構文もレンダリング関数にコンパイルされます。したがって、レンダリング関数を直接使用すると、テンプレート構文からレンダリング関数までのプロセスを保存するのと同じになります。丸めプロジェクトのパフォーマンスがまた大きく向上しました!

パラメータ渡しの簡単な紹介:

最初のパラメーター: { String | Object | Function } HTML タグ名、コンポーネント オプション オブジェクト、または上記のいずれかにresolve非同期関数。必須フィールドです。

2 番目のパラメーター: Objectは、テンプレート内のattributeに対応するデータ オブジェクトです。

3 番目のパラメーター: { String | Array } テキスト ノードまたは子仮想ノード ( VNodes )。

レンダリング機能は Vue に多くの柔軟性をもたらします。以前は、子コンポーネントへの何かの挿入をカスタマイズしたい場合、多くの<slot>を記述する必要がありました。レンダリング機能を使えばこのように再生できます。

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

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

これは tsx で書かれています:

  {
                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]();
  }


それでおしまい!

これで、vue プロジェクトで react を書く方法についての記事は終わりです。vue プロジェクトで react を書く方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介
  • Vue3 Reactivityの実装方法を教えます
  • Vue3.0 における Ref と Reactive の違いの詳細な分析
  • Vue3 における ref と reactive の詳細な説明と拡張
  • vue3 の setUp とリアクティブ関数の使用方法の詳細な説明
  • Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法
  • React、Angular、Vueの3つの主要なフロントエンド技術の詳細説明
  • VueとReactの違いと利点
  • Vue と React の違いは何ですか?
  • VueとReactの詳細

<<:  MySQLの最適化の詳細な分析とパフォーマンス

>>:  Linux mysql-5.6 でルート パスワードをリセットする方法

推薦する

Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明

目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...

Docker コンテナは実行後に終了します (実行を継続する方法)

現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...

Win10 は Tsinghua ソースを使用して pytorch-GPU バージョンをすばやくインストールします (推奨)

Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...

CSS レスポンシブ レイアウト システムの例コード

レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...

echarts ワードクラウドチャートを使用した Vue の実践記録

echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...

Node.jsとDenoの比較

目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...

JavaScriptの構文とコード構造に関する深い理解

目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...

js の関数の長さはどれくらいですか?

目次序文なぜいくらですか?パラメータの数デフォルトパラメータ残りのパラメータ要約する序文今日は関数の...

Nginx メモリプールのソースコード分析

目次メモリプールの概要1. nginxデータ構造2. nginxはOSからスペースngx_creat...

HTML ドラッグ アンド ドロップ機能の実装コード

Vueベースこの機能の核となるアイデアは、JavaScript コードを通じてページ上のノードの左余...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

Vue イベントの $event パラメータ = イベント値の場合

テンプレート <el-table :data="データリスト"> &...

Centos8でdockerがインストールできない問題の解決方法

問題 [root@zh ~]# [root@zh ~]# [root@zh ~]# yum -y d...

Ubuntu 20.04 に Xrdp サーバー (リモート デスクトップ) をインストールする方法

Xrdp は、グラフィカル インターフェイスを通じてリモート システムを制御できる Microsof...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...