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 でルート パスワードをリセットする方法

推薦する

jQueryは画像追従効果を実現します

この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...

Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法

目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...

CSSでプロセスナビゲーション効果を実現する(3つの方法)

CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...

Linux システムで Tomcat を自動的に起動するための設定方法の紹介

1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...

HTML テーブル セルの幅と高さを設定する方法

Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 ...

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明

MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...

MySQL データベース SELECT クエリ式分析

データ管理の大部分は検索であり、SELECT はその大部分を占めています。 SELECT selec...

Vue3でelement-plusを使用する方法の詳細な説明

目次1. インストール2. main.jsにインポートする3. 使用Vue3がリリースされてからしば...

ダイナミッククロックを実現するJS+CSS

この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...

CSS でショートカット プロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...