React コンポーネントを使用して Vue コンポーネントを転送する場合、どのようなコマンドを記述すればよいですか?

この記事では、まず 2 つのフレームワークのコンポーネント間の共通点と非互換性を紹介し、次に、react-to-vue の使用法と原則を紹介します。必要な方は参照してください。

React と Vue の現在の人気に基づいて、 React-to-Vue が開発されました このツールの目的は、コンポーネントの再利用が 1 つのフレームワークに限定されないように、コンポーネントの再利用性をさらに向上させることです

はじめに

React-to-Vue ツールについては、変換されるのは基本的な React コンポーネントであり、すべての React アプリケーションではありません。基本的な反応コンポーネントの定義は、props と state に基づいてレンダリングされるコンポーネントであり、リクエストの作成も含まれる場合があります。

この記事では、まず 2 つのフレームワークのコンポーネント間の共通点と非互換性を紹介し、次に、react-to-vue の使用法と原則を紹介します。実際のビジネスでは、Lufax の React-to-Vue 基本ビジネス コンポーネントの 90% 以上を Vue コンポーネントに変換できます。

2 つのフレームワークの共通コンポーネントを確認します

1. 小道具

// react
FrontendMagazine.propTypes = {
  name: PropTypes.string
}
FrontendMagazine.defaultProps = {
  name: 'FrontendMagazine'
}
// vue
{
  name: 'frontend-magazine',
  props: {
    name: {
      type: String,
      default: 'FrontendMagazine'
    }
  }
}

2. コンポーネント自体の状態

フレームワーク説明反応するat 初期化中に、this.state = {xxx} を通じて Vue を設定し、react の state とは異なり、vue はレスポンシブです

3。 ライフサイクル名は異なりますが、ほぼ対応しています

4. イベントの処理

フレームワーク説明Reactイベントが追加されましたインスタンスへコンポーネント Vue のメソッドがより適切に設計されており、メソッド オブジェクトの下に追加されるため、見つけやすくなり、より直感的になります 5. フレームワーク

説明

ReactcomponentDidCatchVueerrorCaptured6. 2 つのフレームワーク間の非互換性

	react は、多くのシナリオでは vue に基づいて書かれています。 、テンプレートを使用して記述することができますが、vue は jsx 構文も完全にサポートしています。このツールでは、react の jsx 構文を vue でサポートされている jsx に変換するだけです

最新バージョンでは、はフラグをサポートしており、ルートノードが複数のノードを返すことができます。また、react コンポーネントを設計する際には、高レベルのコンポーネントが使用されます

react-to。 -vueツール

インストールと使用

// react
class FrontendMagazine {
  clickme () {
    // xxxx
  }
}
// vue
{
  name: 'frontend-magazine',
  methods: {
    clickme () {
      // xxx
    }
  }
}

オプション:

# install
npm install -g react-to-vue
# usage
Usage: rtv [options] file(react component)

#デモ

rtvデモ.js

原則的な手順

入力ファイルには、最初にbabylonを使用します。解析してastを生成します。

ファイルがtypescriptの場合、対応するts記述が削除されます

1. astを走査し、最初にpropTypesとdefaultPropsを抽出します

2. コンポーネントの種類に応じて、関数コンポーネントとクラスコンポーネントを処理します

3. クラスコンポーネント、ライフサイクル、状態などの情報を変換する必要があります

4. 最後に、抽出した情報を基にvueコンポーネントにつなぎ合わせ、prettier-eslintで美化します

5. 前後の比較変換

オープンソースの React コンポーネントと vue コンポーネントを同時に作成する方法

コンポーネントをオープンソースとして誰もが使用したい場合、作成者は、React コンポーネントを作成して、変換に問題がある場合は、作成したコンポーネントが React プロジェクトと vue プロジェクトの両方で使用できるように、できる限りクロスフレームワークをサポートするようにコードを変更してください。

上記は私があなたのためにまとめたものです。

関連記事:

VUEX 互換 IE でのエラー問題を解決する方法 (詳細なチュートリアル)

Node.js で readline を使用してファイルの内容を 1 行ずつ読み書きする方法

Vuex とは値の変化を観察できないことに対する解決策はありますか?

以上がReact コンポーネントを使用して Vue コンポーネントを転送する場合、どのようなコマンドを記述すればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。