iT邦幫忙

0

CodeMirror.js 出錯 (React)

App.js

import './App.css';
import CodeMirror from 'react-codemirror2';  
import 'codemirror/lib/codemirror.css';  
import 'codemirror/addon/hint/show-hint.css';  
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/theme/ambiance.css'; 


function App() {
	const options={  
		lineNumbers: true,                     
		mode: {name: "python"},          
		extraKeys: {"Ctrl": "autocomplete"},     
		theme: "ambiance" 
	};  
	return (
		<div className="App">
			<CodeMirror 
				ref="python-editor" 
				value="print('')"
				onChange={code => this.props.ChangeCode(code)} 
				options={options} 
			/>  
		</div>
	);
}

export default App;

npm start 沒出錯
但Chrome.....
https://ithelp.ithome.com.tw/upload/images/20210224/20129626rSpCx0Af2l.png

1 個回答

2
Andy Chang
iT邦新手 4 級 ‧ 2021-02-24 14:06:22
最佳解答

有點難確認原因,這些是目前看的出來的:

  1. 請在App.js開頭加上
//加入這一行
import React from 'react';

import './App.css';
import CodeMirror from 'react-codemirror2';  
import 'codemirror/lib/codemirror.css';  

這是因為React在低於React 17版本時,編譯器Babel必須要看到import React from 'react';才會知道要把JSX轉換成React.createElements。這件事在未來可以省略,或著現在你也可以先升級到React 17並且修改webpack設定來解決。

也就是目前對你的程式而言,App並不是React component,也不是string,所以會噴錯。

  1. 在React FC(function component)中,props是透過FC定義函式的參數傳遞,而不是this.props
onChange={code => this.props.ChangeCode(code)} 

正確的做法應該是

function App(props) { //加入props參數
	const options={  
		lineNumbers: true,                     
		mode: {name: "python"},          
		extraKeys: {"Ctrl": "autocomplete"},     
		theme: "ambiance" 
	};  
	return ( // 將 this.props改為 props
		<div className="App">
			<CodeMirror 
				ref="python-editor" 
				value="print('')"
				onChange={code => props.ChangeCode(code)} 
				options={options} 
			/>  
		</div>
	);
}
  1. 你使用了 onChange={code => props.ChangeCode(code)} ,也就是理論上<App/>這個component應該要有一個props叫ChangeCode,他是一個函式。但實際上你並沒有給App這個props

我要發表回答

立即登入回答