一、dom元素展示leisiinnerHTML效果

发表于 | 分类于



有如下代码：

1
2
3
4
5
6
7
8
9
export default class Test extends Component{

    render() {
		let valueText = "<font color='#f00'>ABC</font>";
		return(
			<div>{valueText}</div>
		);
	}
}

我的设想是要界面上显示字体颜色为红色，内容为ABC的文本。理想很丰满，现实很骨感。界面上原模原样显示了： ABC
要实现设想，要这么写即可：

1
2
3
4
5
6
7
8
9
export default class Test extends Component{

    render() {
		let valueText = "<font color='#f00'>ABC</font>";
		return(
			<div dangerouslySetInnerHTML={{ __html: valueText }}> </div>
		);
	}
}

这是reactjs官方的实现机制，避免XSS(cross-site scripting)攻击：
所谓XSS，中文名为跨站脚本, 是发生在目标用户的浏览器层面上的，当渲染DOM树的过程成发生了不在预期内执行的JS代码时，就发生了XSS攻击。