我无法增加 Codemirror React 组件的高度

Question

在我的 React 应用程序中，我使用了 'Editor.jsx 组件（它只是代码镜像的包装器，以防我需要在实际的 CodeMirror 视图周围提供装饰）。

附加文件中的渲染组件添加到其中的高度为 100%，其他类似于 CodeMirror 的组件确实使用该全高。

然而，CodeMirror 组件只显示 15 行（我必须滚动才能看到下面的内容）。

该代码与来自 github 的示例非常相似。heightgetInitialState() 中的属性也没有效果（包含也没有）。

import React from 'react';
var CodeMirror = require('react-codemirror');

// fishing this 'require' out has caused severe headache and cost time.
// IF not included, default bootstrap style used. must override it with this.
// but for react-codemirror component we need this one!!!
// REF http://dorianpula.ca/2015/10/07/adding-a-code-editor-to-rookeries/
require("codemirror/lib/codemirror.css");
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/python/python');

var DFLTS = {
  javascript: 'var component = {\n\tname: "react-codemirror",\n\tauthor: "Jed Watson",\n\tforUseBy: "KB"}',
  python: 'print "hello python world"'
}

export default React.createClass ({

  localOnCodeChange(newCode) {
    this.props.onCodeChange(newCode)
  },
  getInitialState() {
    return {
      code: DFLTS.javascript,
      readOnly: false,
      mode: 'javascript',
      height:"100%",
      viewportMargin: "Infinity"

    };
  },
  componentDidMount() {
    CodeMirror.setSize("100%", 1000);
  },

  changeMode(e) {
    // add python later.
    // no-op
  },

  toggleRreadOnly() {
    this.setState({
      readOnly: !this.state.readOnly
    }, () => this.refs.editor.focus());
  },

  interact(cm) {
    console.log(cm.getValue());
  },

  render() {
    var options = {
      lineNumbers: true,
      readOnly: this.state.readOnly,
      mode: this.state.mode
    };

    return (
          <CodeMirror ref="editor" value={this.props.code} onChange={this.props.onCodeChange} options={options} interact={this.interact}/>
    )
  }
});

任何指针，不胜感激。

Answer 1

.CodeMirror这个库中的类似乎有一个硬编码height: 300px，并且在他们关于能够设置高度的问题中有一个悬而未决的问题。如果你.CodeMirror { min-height: 100% }输入你的 CSS 可能会成功。

或者，传递一个classNameto <CodeMirror>（它将被添加到类中）来设置最小高度，或者一个带有 的高度!important，或者只是更大的特异性。

（Tsk tsk 到您必须与之抗争的组件:)）