Reactで構成されたUIでAceエディターを使用したい

Question

React初学者です。

<div id="editor"></div>
<div id="output"></div>

</script>
  var editor = ace.edit("editor");
  var Text = React.createClass({
    render: function (){
      return(
        <div><span>HERE</span></div>
      );
    }
  });
  ReactDOM.render(
    <Text />,
    document.getElementById('output')
  );
</script>

上のようなコードで、"HERE"の部分に、aceエディタの状態が変わるたびにエディタの内容を表示させたいのですが、どのようにするのが最もいいのかわかりません。

<div id="editor"></div>
<div id="output"></div>

</script>
var editor = ace.edit("editor");
editor.on('change',function(){
  var text   = editor.getValue();
  var Text = React.createClass({
    render: function (){
      return(
        <div><span>{this.props.text}</span></div>
      );
    }
  });
  ReactDOM.render(
    <Text text={text}/>,
    document.getElementById('output')
  );
});
</script>

このようにすれば解決しないこともないですが、いささか悪いコードのような気がしてなりません。
ソースコードそのものでなく、「これを使うといい」とか「こういう方針で」のような回答で構いませんので、よろしくお願いいたします。

Answer 1

reactでaceエディタを用いるのであれば，
https://github.com/securingsincity/react-ace などはどうでしょうか．
AceEditorコンポーネントを提供しているので，AceEditorをReact.createClassなどで作成した，
コンポーネントと同じように扱うことができると思います．

Comments

[SasakiAkira]

ご解答感謝いたします。返信遅くなりまして申し訳ありません。
追加の質問なのですが、これは素のaceで使えるメソッド等も使えるのでしょうか？

[退会済みユーザー]

editor.on 系のイベントは，AceEditorコンポーネントのpropsである，onLoad，onBeforeLoad，onChange，onCopy，onPaste，onFocus，onBlurに関数を渡すことで登録できます．

例えば，
```jsx
function sanpleFunction(newValue) {
console.log('change',newValue);
}

<AceEditor オプション略
　 OnChange={sampleFunction} />
```

[SasakiAkira]

ありがとうございます。
では例えばsetPositionなどはどうやって使えば良いのでしょうか？

[退会済みユーザー]

onLoadからedlitorのインスタンスを取得できます．
そのインスタンスからいつものようにメソッドを呼べば大丈夫です．

```jsx
const onLoad = newEditor => {
this.editor = newEditor;
}

<AceEditor
onLoad={onLoad} />
```

例えば，
this.editor.selection.getCursor();
みたいな感じで使えます

詳しくは
https://github.com/ajaxorg/ace/wiki/Embedding-API
と
https://github.com/securingsincity/react-ace#usage
を読めばわかります

[SasakiAkira]

ご丁寧に本当にありがとうございます。
疑問だった点を全て解消できました、ありがとうございました！