无法增加 Codemirror React 组件的高度

Question

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

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

但是 CodeMirror 组件只显示 15 行（我必须滚动才能看到下面的行）。

该代码与 github 中的示例非常相似。 getInitialState() 中的 height 属性也没有效果（包含的 .

也没有效果）

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 class 似乎有一个硬编码的 height: 300px 并且在他们的问题中有一个关于能够设置高度的未解决的问题。如果你把 .CodeMirror { min-height: 100% } 放在你的 CSS 中可能会成功。

或者将 className 传递给 <CodeMirror>（它将被添加到 classes）以设置最小高度，或带有 !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 class 添加一个附加项来获得要覆盖的高度，如下所示：

.CodeMirror {
  height: 100% !important
}

它仅在添加 !important 后应用更改，以强制它覆盖现有的 class，后者硬编码为 300 像素。

无法增加 Codemirror React 组件的高度

Am unable to increase Height of Codemirror React Component

codemirror

reactjs