javascript - 如何使 Marked.parse 在段落上工作？

Question

如何在我的免费代码营挑战中使用标记库？

我看到很多人使用带有危险SetInnerHTML 的DIV 来使用marked.parse(text)，但是为什么呢？

我正在使用带有 JSX {this.state.input} 的段落。

以下段落行不起作用。它按字面意思呈现“marked.parse（无论我在 textarea 中写什么）”

<p>{marked.parse({this.state.input)}</p>

我的代码：

class Markdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
       
  render() {
    return (
      <div id="main">
         <textarea
      id="editor" 
           value={this.state.input}
           onChange={this.handleChange} />
        
        <p id="preview" >{this.state.input}</p>   
      </div>
  )}      
}

ReactDOM.render(<Markdown />, document.getElementById('markdown'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div id="markdown"></div>