[英]react use dangerouslySetInnerHTML to render json with html tags
[英]In React dangerouslySetInnerHTML is not working for html tags.
在React中,SetInnerHTML不适用于html标签。 它甚至不在React的主页上工作。 键入<h1>this is heading.</h1>
我该如何在React中渲染HTML标签? 为什么我们在React教程中为* <em>
标签传递*?
在React
主页示例中,他们使用markdown
( markdown
不理解HTML语法)和Remarkable
库。如果您只想使用HTML,则从rawMarkup
方法中删除Remarkable
- { __html: this.state.value }
var HTMLEditor = React.createClass({ getInitialState: function() { return {value: 'Put here <h1>HTML</h1>'}; }, handleChange: function(e) { this.setState({ value: e.currentTarget.value }); }, markup: function() { return { __html: this.state.value }; }, render: function() { return ( <div className="html-editor"> <textarea onChange={ this.handleChange } defaultValue={this.state.value} /> <div className="html-editor__content" dangerouslySetInnerHTML={ this.markup() } /> </div> ); } }); ReactDOM.render(<HTMLEditor />, document.getElementById('container'));
.html-editor { border: 1px solid #000; padding: 10px; } .html-editor__content { margin: 10px 0 0 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.