将我的 ReactJS 输出转换为降价

Question

我正忙于 React 中的第一个 FCC 数据可视化认证项目，此时我有点迷茫。我已经成功地创建了应用程序，成功地将我的输入动态显示到输出 div。但现在我卡住了。我不太明白我猜的文档。我正在努力更改代码以在降价中显示查看器输出。所有和任何帮助将不胜感激。

我的HTML代码：

<div id="myApp">
</div>

我的 React 代码：

class Markdown extends React.Component {
  constructor(props){
    super(props);
    this.state={
      markdown: ""
    }
  }
  toggleChange(event){
    this.setState({
      markdown: event.target.value
    });
  }

  render(){
    return(
      <section className="text-center container card">
        <div className="card" id="heading">
          <h1>FCC Markdown Project</h1>
          <h2>{this.props.name}</h2>
        </div>

        <div className="container card" id="text-display">
         {this.state.markdown}
        </div>
        <div className="container" id="text-input">
          <textarea name="md-input" rows="10" cols="90" onChange={this.toggleChange.bind(this)}></textarea>
        </div>

      </section>
    );
  }
}

ReactDOM.render(<Markdown name="By: BlackBat023"/>, document.getElementById("myApp"));

Answer 1

当您在文本区域中键入内容时，您会调用 toggleChange() 方法。

toggleChange(event){
  this.setState({
    markdown: event.target.value
  });
}

如您的问题所写，该方法作用不大。它只存储您在 this.state.markdown 变量中键入的内容。您需要做的是在设置状态之前处理该输入。

toggleChange(event){
  // Process the string event.target.value that is formatted with markdown.
  // You should replace the constructs with HTML tags and then finally store it in the state.
  // processMarkdown is some function you can define (or use a third-party module) to process the input
  const processedInput = processMarkdown(event.target.value);

  this.setState({
    markdown: processedInput
  });
}

将我的 ReactJS 输出转换为降价

converting my ReactJS output to markdown

reactjs

react-dom

github-flavored-markdown