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

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上工作得很好。我不知道为什么它不想在我的本地主机上运行。我能够正确地导入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"));