为什么使用标记库时React.js不加载HTML代码

Question

I am trying to build a markdown editor for which I am using the Marked library My Code doesn't show any error but doesn't render the html at all.

Code :

 class TextArea extends React.Component { render() { return ( <div dangerouslySetInnerHTML={{__html: this.props.value}} /> ); } } class Markdown extends React.Component { constructor(props) { super(props); this.state = { value: " " }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } render() { return ( <div> <textarea onChange={this.handleChange} /> <TextArea value={marked(this.state.value,{sanitize: true})} /> </div> ); } } ReactDOM.render(<Markdown />, document.getElementById("markdown")); 

The input I have given to the code is in markdown format

 Heading ======= Sub-heading ----------- ### Another deeper heading Paragraphs are separated by a blank line. Leave 2 spaces at the end of a line to do a line break Text attributes *italic*, **bold**, `monospace`, ~~strikethrough~~ . Shopping list: * apples * oranges * pears Numbered list: 1. apples 2. oranges 3. pears The rain---not the reign---in Spain. 

and the output give by marked library is

 <h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3> <p>Paragraphs are separated by a blank line.</p> <p>Leave 2 spaces at the end of a line to do a<br>line break</p> <p>Text attributes <em>italic</em>, <strong>bold</strong>, <code>monospace</code>, <del>strikethrough</del> .</p> <p>Shopping list:</p> <ul> <li>apples</li> <li>oranges</li> <li><p>pears Numbered list:</p> </li> <li><p>apples</p> </li> <li>oranges</li> <li>pears</li> </ul> <p>The rain---not the reign---in Spain.</p> 

But It doesn't render the HTML Please Help me. Thanks in advance

Answer 1

this.state.value should be this.props.value because you are sending value in as a prop of TextArea :

class TextArea extends React.Component {
    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: this.props.value}} />
        );
    }
}