使用react的时候,总有一些变量是html的字符串,但是我们却想要实现innerHtml的类似方法,直接用html进行渲染。
这里react提供了一个dangerouslySetInnerHTML方法,可以实现此赋值操作。具体详情可以自己去google一个下,关键字:’react dangerouslySetInnerHTML’.
下面是我为记录的一个示例,可以作为一个简单的demo了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| const Login = React.createClass({ getInitialState: function () { return { 'error_state': false, 'error_message': '' } }, handleClick:function(){ let error_message = ''; error_message += '<li>错误信息一</li>'; error_message += '<li>错误信息二</li>'; error_message += '<li>错误信息三</li>'; this.setState({ 'error_state': true, 'error_message': error_message }); }, render:function(){ let alert_class = this.state.error_state ? 'alert alert-danger' : 'aler hidden'; return ( <div> <button onClick={this.handleClick}>添加html</button> <div className={alert_class} dangerouslySetInnerHTML={{__html:this.state.error_message}} ></div> </div> ); } });
|