为什么使用标记库时React.js不加载HTML代码 [英] Why is React.js not loading HTML code when using marked library

问题描述

我正在尝试构建一个Markdown编辑器，为此我正在使用标记库 我的代码没有显示任何错误，但根本没有呈现html.

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.

代码:

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

我提供给代码的输入为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> 

但是它不呈现HTML 请帮我. 预先感谢

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

推荐答案

this.state.value应该为this.props.value，因为您要发送value作为TextArea的道具:

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}} />
        );
    }
}

这篇关于为什么使用标记库时React.js不加载HTML代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！