1. 在 JSX 中使用表达式
- 表达式要包含在大括号里。
- 书写 JSX 带上换行和缩进,增强代码的可读性
- JSX 代码的外面扩上一个小括号,这样可以防止 分号自动插入 的 bug。
- 可以在 if 或者 for 语句里使用 JSX,将它赋值给变量,当作参数传入,作为返回值都可以:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
5,文档引入以下是三个文件
// react 库
<script src="https://cdn.bootcss.com/react/16.9.0-alpha.0/umd/react.development.js"></script>
// DOM渲染
<script src="https://cdn.bootcss.com/react-dom/16.9.0-alpha.0/umd/react-dom.development.js"></script>
// Babel 语法解析 jsx
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
2.JSX 属性
- react DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。
案例
class 变成了 className,而 tabindex 则对应着 tabIndex。
- 引号来定义以字符串为值的属性
const element = <div tabIndex="0"></div>;
3.== 大括号==来定义以 JavaScript 表达式为值的属性
const red = {
color:'red'
}
const element = (
<h1 className={red.color}>
Hello, {formatName(user)}!
</h1>
);
3.JSX 嵌套
- JSX 标签是闭合式的,那么你需要在结尾处用 />
- JSX 标签同样可以相互嵌套
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
<img src={user.avatarUrl} />
</div>
);
4.SX 防注入攻击
你可以放心地在 JSX 当中使用用户输入:
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的:
const element = <h1>{title}</h1>;
React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
JSX 代表 Objects
Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
//1. 转化为
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
//2. React.createElement() 首先会进行一些避免bug的检查,返回类似于下面的对象
// 注意: 以下示例是简化过的(不代表在 React 源码中是这样)
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};