CodeMirror.js 出錯 (React)

react codemirror

EricChu 2021-02-24 10:14:23 ‧ 1241 瀏覽

分享至

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.....

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Andy Chang

iT邦研究生 3 級 ‧ 2021-02-24 14:06:22

最佳解答

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

請在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，所以會噴錯。

在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>
	);
}