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"));