JSX

JSX就是javascript的语法扩展

1.使用变量


// 声明存放于大括号中
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

//展示hello Josh Perez

2.js有效的表达式

function addnumber(a,b) {
  return a + b;
}
const a = 1;
const b = 2;

const element = <h1>addresult {addnumber(a,b)}</h1>;

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

//展示addresult 3

3.JSX也是表达式

在编译之后,JSX会被转换成普通的js函数,所以可以在if或者for循环中将JSX作为参数或者作为返回值


function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

4.JSX特定属性

可以使用双引号设置变量的字面量

const element = <div tabIndex="0"></div>;

也可以使用大括号插入js表达式

const element = <img src={user.avatarUrl}></img>;

但是对于同一个属性两者不可以同时使用

5.使用JSX指定子元素

一个标签里面没有内容，你可以使用 /> 来闭合标签

const element = <img src={user.avatarUrl} />;

JSX 标签里能够包含很多子元素

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

6.JSX表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用


const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);


const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

7.JSX防止注入攻击

原理:React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击

React之路-JSX

JSX