_阿白君
_阿白君

jsx 用法

原文链接：https://www.jianshu.com/p/3345e94baec0

什么是JSX

JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。

其表现是如何：

  1. 常规的html代码都可以写，可以通过{props}往html中插入变量或任意有效的JS表达式，而无须加上$
  2. 此外还可以插入带参数的函数{func(props)}
Hello, {getName(props)}
  1. JSX被编译后，是一个函数调用，返回值为JS对象，故JSX也可作为表达式，例如用于If判断
  2. 可以在标签中添加属性，属性值若是字符串，则加上引号，若是对象或表达式，则加上{}. ""与{}不能混用。由于JSX更贴近JS，故属性的key建议使用驼峰法写法
const element = 
;

const element = ;
  1. 若JSX元素没有子元素/节点，可以单闭合
const element = ;
  1. 可以给html添加类但class需改写成className，另外若添加自定义的要渲染的属性，最好以data-开头

JSX将XML语法加入到JavaScript中，在JS中写了JSX将会被预处理成React Element

为什么React要创建JSX：
渲染的逻辑处理与UI逻辑其实是耦合的, event, state, data互相关联，既然如此，那么就把html标记语言与逻辑处理相关的js内容放在一起，组成一个松耦合的模块，这个模块就是JSX元素

写JSX实际做了什么

首先怎么才能写JSX呢，在普通的JS文件中需引入react,reactDOM(若要对DOM进行操作)以及babel或者通过Babel在线编译

JSX其实是一个对象，而且这个对象内的值都被进行了转义(escape)，见以下的例子：

var esca = 5>3{true && '--this is true'}

console.log(esca)

ReactDOM.render(
  esca,
  document.getElementById('root')
);

输出结果如下

image

什么？ 我的true呢？
让我们把代码放到Babel看下JSX生成了什么东西

//Babel输出
var esca = React.createElement(
  'a',
  { href: 'https://baidu.com' },
  React.createElement(
    'span',
    null,
    '5>3 ',
    true && '$gt;this is true'
  )
);

可以看到react将JSX代码片段分为几块，类型(元素名), 属性值props(包含children和属性参数等), key和ref, owner和store
我们发现没有被{}包住的默认是字符串，会进行转义，而{}包住的则会被当作表达式，不被转义，由于true是真，故显示后面的值，但问题来了，若我们想在表达式里要进行转义成HTML呢？
方法一： 使用Unicode编码

var esca = 5>3 {true && '\u003Ethis is true'}
//这样在表达式里也可以进行转义了

注意，若是直接使用var esca = React.createElement('span', null, '5>3 this is true;')创建的，字符串和表达式内的均不会进行转义

方法二： 使用dangerouslySetInnerHTML

var esca = 5>3{true &&}

//或者定义一个新的JS元素,将需要转义的内容放入

等价于

var esca = React.createElement(
  'a',
  { href: 'https://baidu.com' },
  '5>3',
  true && React.createElement('span', { dangerouslySetInnerHTML: { __html: ' >this is true' } })
);

方法三：在{}通过数组将字符串和表达式包裹在一起

{['First ', ·, ' Second']}

此外对于某些字体图标，可以使用以下的方法

关于JSX防范XSS攻击

XSS是跨站脚本注入攻击, 更多解释可查看这里

  1. 由于当你尝试通过{html}进行插入html代码时, React会自动将html转为字符串,故React可部分防止XSS攻击
    例如以下代码
const username = "";

class UserProfilePage extends React.Component {
  render() {
    return (
      
 Hello {username}!

    );
  }
}

ReactDOM.render(, document.querySelector("#app"));

显示为

image
  1. JSX中是通过传入函数作为事件处理方式，而不是传入字符串，字符串可能包含恶意代码

尽管如此，还是可以通过一些手段进行XSS攻击，如：, ,