《React 开发实战》笔记(一)空格与注释

(一)如何添加空格

标签中如果需要打一个空格,需要使用{" "},如:

return{

<a href="www.baidud.com">百度</a>

<a href="www.baidud.com">引擎</a>

}

输出:百度引擎

return{

<a href="www.baidud.com">百度</a>{" "}

<a href="www.baidud.com">引擎</a>

}

输出:百度 引擎


(二)JSX中的注释

jsx缺少对html注释的支持如<!-- 注释内容 --> 但是,jsx是由javaScript表达式组成的,所以它支持普通的javaScript注释,需要注意的是,在处于一个标签的子域中时,需要用大括号{ } 来包围注释,如:

let content = {

<Nav>

{/* 测试注释内容:child comment,put {} around */}

<Person /* multi

line

comment */

name={window.isLoggedIn ? window.name : ''} //end of line comment

</Nav>


(三)动态渲染html内容dangerouslySetInnerHTML属性

React内置了XSS攻击保护措施,这意味着默认情况下,它不允许动态生成HTML标签并附加到JSX中。

通常而言,这样做很好,但在某些特定的情况下,你或许想在运行时生成HTML..........擦,怎么办?


React提供了dangerouslySetInnerHTML属性,来跳过XSS保护并直接渲染任何内容。

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...