一个ACE编辑器的瘦包装器,用于制作React组件

我写了一个组件,它是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 = '
' +
        this.props.code + '
 \
       \
      ';

      return 

    //return 
{this.props.code}
  }
}

export default AceEditor;

这个想法很简单,只需使用原始HTML代码插入,原始HTML代码dangerouslySetInnerHTML如下:

function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}

原始HTML代码来自官方网站https://ace.c9.io/#nav=embedding,只有很少的修改.

难道我做错了什么？

你想挂钩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 (
        

          {this.props.code}
        
      );
  }
}

export default AceEditor;