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

或者将className传递给<CodeMirror>（它将被添加到类中），它设置最小高度，或!important的高度，或更高的特异性。

（Tsk tsk到你必须与之战斗的组件:)）

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')

无法增加Codemirror React Component的高度

2 个答案: