JSX 的表达式

JSX 表达式

• 推荐在 JSX 代码的外面扩上小括号，这样可以防止分号自动插入的 bug。 JSX 最终会被转换为 JavaScript 的 React.createElement()方法。

JSX 防止注入攻击

• 可以放心的使用用户输入，React DOM 在渲染之前会过滤所有的传入值，所有的内容在渲染之前都被转换为字符串，这样可以防止 XSS 攻击。

在运行时选择类型

// 如果需要通过一个表达式来确定React元素的类型，可以先将其赋值给开头为大写的变量
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;

JSX 的属性

class 和 for

在 JS 中 class 和 for 都是关键字，在 JSX 中需要做对应的转换

• class 改为 className
• for 改为 htmlFor

javascript 表达式作为 props

<MyComponent foo={1 + 2 + 3 + 4} />

字符串字面量

// 它们等价
<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

属性默认为‘true’

• 如果没有给属性传值它默认为 true

// 下面两个等价
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

展开属性

• 可以使用...来传递整个属性对象，但是一定要谨慎使用，避免传递无用或多于的属性。

自定义的 HTML 属性

• 在 JSX 中往 DOM 元素中传入自定义属性 React 是不会渲染的，需要使用 data-前缀

JSX 中的子代

在包含开始和结束标签的 JSX 表达式中这两个标签的内容被传递为专门的属性： props.children，有几种不同的方式来传递子代。

字符串字面量

• JSX 会移除空行和开始与结尾处的空格，标签临近的新行也会被移除。

JSX 子代

JavaScript 表达式作为子代

函数作为子代

布尔类型、Null 以及 Undefined 将会忽略

• false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。
• 值得注意的是有一些 “falsy” 值，如数字 0，仍然会被 React 渲染。

注释

{/* <div>123</div> */}

深入 JSX

实际上，JSX 仅仅只是 React.createElement(component, props, ...children)函数的语法糖。

• 用户定义的组件必须以大写字母开头。
• 第一个参数制定了 React 元素的类型，大写字母开头的 JSX 标签意味着他们是 React 组件。这些标签会被编译为对命名变量的直接引用。但必须将其包含在作用域内。
• 每个组件必须拥有一个唯一的父节点。