反応[5]反応ピットは、プロジェクトの導入を覚えているし、(カスタムリストのヒント)を反応させ、エースをコードエディタプラグインを使用するステップ

最近では、需要のSQLエディタプラグインのコードの導入は、コード・インテリジェンスのヒントを強調必要であり、そのようなコードヒントリストなどのカスタム機能をサポートしています。そこには、関連するデモではありませんので、いくつかのピットを踏むので、カスタムコードの真ん中のリストをヒントに、我々は後で見るために、次のように要約しています。

1.インストール

yarn add react-ace //或 npm install react-ace

プロジェクトの2.はじめに

import AceEditor from 'react-ace';

アセンブリ3.

<AceEditor
  ref="editor"
  mode="mysql"
  theme="xcode"
  onChange={this.onChange.bind(this)}
  name="UNIQUE_ID_OF_DIV"
  editorProps={{ $blockScrolling: true }}
  enableBasicAutocompletion={true}
  enableLiveAutocompletion={true}
  enableSnippets={true}
  style={{ width: "100%", height: "100%", fontSize: "18px" }}
  onLoad={this.complete.bind(this)}
/>

4.API

  • MODE:コード言語、以下のオプションの種類
    コード言語タイプ
  • テーマ:テーマは、以下のオプションを入力します
    テーマタイプ
  • enableBasicAutocompletion自動的に通常、代替タイプ(真/偽)
  • enableLiveAutocompletion自動的にリアルタイムで、代替タイプ(真/偽)
  • enableSnippetsコード補完、代替タイプ(真/偽)
  • onLoad:ロード機能の実行が完了すると、最初のパラメータがあり、インスタンスエディタ

ここでは主にコードヒント、機能の例のカスタムリストの話を次のように実装され
ここに画像を挿入説明
、次のように1.まず、カスタムプロンプトが表示リストを定義

const completers = [
  {
    name: 'name',
    value: 'one',
    score: 100,
    meta: '手动添加1'
  },
  {
    name: 'name',
    value: 'two',
    score: 100,
    meta: '手动添加2'
  },
  {
    name: 'name',
    value: 'three',
    score: 100,
    meta: '手动添加3'
  }
];

方法2.次に、関数レーンをONLOADするために実行されます

complete(editor) {
    //向编辑器中添加自动补全列表
    editor.completers.push({
      getCompletions: function (callback) {
        callback(null, completers);
      }
    });
  }

上記。

サンパウロの年は、私はあなたに驚い骨を参照してください、あなたのコードを吹く可能性を秘めている、そこに324.57ギガバイトフロントエンドの学習教材は、あなたに教えるために!何を、あなたは信じていませんか?
いくつかの最初のカジュアルルックの地図:
ここに画像を挿入説明
ここに画像を挿入説明
ここに画像を挿入説明
教育ビデオのピットフルセットへのフロントエンド
確かに十分に見ていません。再びGIFの描画は、体を加熱しますか?
教育ビデオのピットフルセットへのフロントエンド
あなたがピットへのフロントエンドを望む以上の技術を学ぶのであれば問題はあり、多くの友人の世界(ベースフレンズ)、参加することを歓迎し、より興味深いの魂、砂の彫刻やドローイングユーザーがオンライン戦い、もっといじめ妹を知っていますアヒルの群れのフロントエンド- ACは、
ああ、スキャンコードプラスグループ
2次元コードを掃引は、グループああにあなたを引っ張ってお友達に追加します。

おすすめ

転載: www.cnblogs.com/twodog/p/11320719.html
おすすめ