無法增加Codemirror React組件的高度

在我的React應用程序中，我使用了'Editor.jsx組件（這只是圍繞代碼鏡像的包裝，以防我需要圍繞實際的CodeMirror視圖提供裝飾）。無法增加Codemirror React組件的高度

附加文件中的渲染組件被添加到的高度爲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}/> 
    ) 
    } 
});

任何指針，非常感謝。

來源

2016-08-09 user3213604

該庫中的.CodeMirror類看起來有一個硬編碼的height: 300px，其中有關於能夠設置高度的問題還有一個未解答的問題。如果你把.CodeMirror { min-height: 100% }放在你的CSS中，可能會有訣竅。

備選地傳遞到className<CodeMirror>其設定最低高度，或與!important的高度，或只是更大的特異性（它會被添加到類）。

（嘖嘖嘖嘖，你必須與之戰鬥:)）

來源

2016-08-09 23:02:27

謝謝，謝謝，謝謝！ .CodeMirror {height：100％！important}工作。添加內聯樣式= {xxx}沒有，順便說一句。 – user3213604

無法增加Codemirror React組件的高度

回答

相關問題