无法提高Codemirror反应组件的高度

Question

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

将附加文件中呈现的组件添加到其中的高度为100%，其他类似于CodeMirror的组件也使用该高度。

然而，CodeMirror组件只显示了15行(我必须滚动到下面的行)。

代码非常类似于来自github的示例。height属性在getInitialState()中也没有任何效果(包含的内容也一样)。

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中，这可能会奏效。

或者，将一个className传递给<CodeMirror> (它将被添加到类中)，设置一个min高度，或者用!important设置一个高度，或者只是具有更大的特异性。

(对你必须与之战斗的组件：)

Answer 2

如果您需要动态更改高度，或者根本不想使用css，您可以使用ref

const codemirrorRef = React.useRef();

React.useEffect(() => {
  const current = codemirrorRef.current.editor.display.wrapper.style.height = "1000px";
});

<CodeMirror
    [...]           
    ref={codemirrorRef}
/>

codemirrorRef.current.editor.display.wrapper包含div元素。如果你做了document.getElementById('#id')，你可以做任何你会做的事

Answer 3

通过在我的CSS文件中添加一个现有的CodeMirror类，我能够获得要重写的高度，如下所示：

.CodeMirror {
  height: 100% !important
}

它只在添加!important之后才应用此更改来强制它覆盖现有的类，该类是硬编码为300个像素的。