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クラスには、ハードコードheight: 300pxが含まれているように見えます。高さを設定できるという問題については未解決の問題があります。あなたが.CodeMirror { min-height: 100% }をあなたのCSSに入れたら、そのトリックをするかもしれません。

〜<CodeMirror>（これはクラスに追加されます）に、最小高さ、または高さを!important、またはより高い特異度に設定します。

（あなたは:)と戦う必要があるコンポーネントへのTSK TSK）