代码在现场工作，而不是在代码笔上工作：未捕获的错误'<'

Question

我的代码在我的网站上有效，但在 CodePen 上不起作用。当我尝试将代码从Visual Studio Code复制到CodePen时，出现此错误： 未捕获的语法错误：意外的标记"<">

这是我的代码笔的链接：https://codepen.io/sherlockieee/pen/ExPXKgJ

这是代码：

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import marked from "marked";
// ALLOWS LINE BREAKS WITH RETURN BUTTON
marked.setOptions({
breaks: true,
});
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
return `<a target="_blank" href="${href}">${text}</a>`;
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
markdown: placeholder,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
markdown: e.target.value,
});
}
render() {
return (
<div className="App">
<div className="container">
<h1> Markdown Preview </h1>
<div className="row">
<div className="editor-box col">
<h2>Editor View</h2>
<textarea onChange={this.handleChange} id="editor">
{placeholder}
</textarea>
</div>
<div className="preview-box col">
<h2>Preview </h2>
<div
id="preview"
dangerouslySetInnerHTML={{
__html: marked(this.state.markdown, { renderer: renderer }),
}}
/>
</div>
</div>
</div>
</div>
);
}
}
const placeholder = `# Welcome to my React Markdown Previewer 

`;
export default App;

Answer 1

你需要把你的Javascript放在一个带有type="text/jsx"的脚本标签中，因为JSX不是有效的Javascript。

<script type="text/jsx">
//..Your code
</script>