ACE 编辑器的薄包装器，用于制作 React 组件

Question

我写了一个组件，它是 ace 编辑器的精简包装。 ACE编辑器会出现一秒就消失，很奇怪

完整代码如下：

import React, { PropTypes, Component } from 'react';

class AceEditor extends Component {

  static propTypes = {
    mode: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired,
  };

  static defaultProps = {
    mode: 'javascript',
    code: '//write your code here',
  };

  render() {
      const jsCode = '<div id="my-ace-editor" style="font-size: 14px !important;border: 1px solid lightgray;">' +
        this.props.code + '</div> \
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js" type="text/javascript" charset="utf-8"></script> \
      <script> \
        var editor = ace.edit("my-ace-editor"); \
        editor.setTheme("ace/theme/clouds"); \
        editor.getSession().setMode("ace/mode/javascript"); \
        editor.setShowPrintMargin(false); \
        editor.setOptions({minLines: 25}); \
        editor.setOptions({maxLines: 50}); \
      </script>';

      return <div id="ace-editor-container" dangerouslySetInnerHTML={{__html: jsCode}} />
    //return <p>{this.props.code}</p>
  }
}

export default AceEditor;

思路很简单，使用dangerouslySetInnerHTML插入原始HTML代码即可，原始HTML代码如下：

<div id="ace-editor-container">
<div id="my-ace-editor" style="font-size: 14px !important;border: 1px solid lightgray;">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("my-ace-editor");
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setShowPrintMargin(false);
    editor.setOptions({minLines: 25});
    editor.setOptions({maxLines: 50});
</script>
</div>

原始HTML代码来自官方网站https://ace.c9.io/#nav=embedding，只做了很少的小改动。

我是不是做错了什么？

Answer 1

你想挂钩 componentDidMount 来桥接 React 与许多其他库：

import React, { PropTypes, Component } from 'react';

class AceEditor extends Component {

  static propTypes = {
    mode: PropTypes.string,
    content: PropTypes.string,
  };

  static defaultProps = {
    mode: 'javascript',
    code: '//write your code here',
  };

  componentDidMount(){
    const node = React.findDOMNode(this.refs.root);
    const editor = ace.edit(node);
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setShowPrintMargin(false);
    editor.setOptions({minLines: 25});
    editor.setOptions({maxLines: 50});
  }

  render() {
    const style = {fontSize: '14px !important', border: '1px solid lightgray'};
      return (
        <div ref="root" style={style}>
          {this.props.code}
        </div>
      );
  }
}

export default AceEditor;

在开发构建的其他地方包含 ace.js，或者如果库支持，则使用 CommonJS 模块。

工作示例：http://codepen.io/romseguy/pen/LGYxNj

ACE 编辑器的薄包装器，用于制作 React 组件

A thin wrapper of ACE editor to make a React Component

ace-editor

reactjs