Question

我想使用此插件将markdown渲染为html。Click here for plugin。我有一切工作，但最终渲染的是屏幕上的对象。我不知道如何访问它们。根据我的理解，我不需要。有人可以请帮助。

以下是当前的代码。

class ChangeText extends React.Component {
  constructor(){
    super()
    this.state={
      markdown: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*'
    }
  }
  updateValue(event){
    let newMarkdown = event.target.value
    this.setState({
      markdown: newMarkdown
    })
  }

  rawMarkUp(text){
    Mark.setOptions({
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: true,
      smartLists: true,
      smartypants: false
    });

    let rawhtml = Mark(text);
    console.log({__html: rawhtml});
    return {__html: rawhtml}
  }
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-md-6">
            <h4>Write your text here and see the mark down -></h4>
             <textarea  className="form-control" width='300' ref="textarea" value={this.state.markdown} onChange={this.updateValue.bind(this)}/>
          </div>
          <div className="col-md-6">
             <h4>Markdown Result</h4>
            {/* <div dangerouslySetInnerHTML={this.rawMarkUp(this.state.markdown)}></div> */}
            <span dangerouslySetInnerHTML={this.rawMarkUp(this.state.markdown)}></span>

          </div>
        </div>
      </div>
    )
  }
}

export default ChangeText;

Answer 1

该应用程序适用于codepen就好了。我不确定为什么它不想在我的localhost上运行。我能够正确导入react-markdown文件，但我认为这就是问题所在。

点击此处的链接CodePen Link

class ChangeText extends React.Component {
  constructor(){
    super()
    this.state={
      value: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*'
    }
  }
  updateValue(event){
    let newMarkdown = event.target.value
    this.setState({
      value: newMarkdown
    })
  }

  rawMarkUp(value){
  var rawMarkup = marked(value, {sanitize: true});
  return { __html: rawMarkup };

  }
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-md-6">
            <h4>Write your text here and see the mark down -></h4>
             <textarea  className="form-control" width='300' ref="textarea" value={this.state.value} onChange={this.updateValue.bind(this)}/>
          </div>
          <div className="col-md-6">
             <h4>Markdown Result</h4>
            {/* <div dangerouslySetInnerHTML={this.rawMarkUp(this.state.markdown)}></div> */}
            <span dangerouslySetInnerHTML={this.rawMarkUp(this.state.value)}></span>

          </div>
        </div>
      </div>
    )
  }
}
React.render(<ChangeText />,document.getElementById("container"));

REACT如何使用React标记的库插件来呈现HTML

1 个答案: