【Day02】JSX（JavaScript 语法扩充）

JSX 特点

• 全称为 JavaScript Syntax Extension，即 JavaScript 语法扩充，是 React 独特的样板语言（template language）
• 内容为 JavaScript + HTML/XML 的语法混合
• JSX 属於 JavaScript 表达式（Expression），就像撰写纯 JavaScript 一样，可配合陈述式和表达式使用
• 以元件（components）为思考中心而诞生的语言
• 编译後会转成纯 JS 语法
• 自主防范 Injection 攻击（React DOM 会 escape 所有嵌入 JSX 的变数）

注解方式

• 多行：/* 我是注解内容 */
• 单行：// 我是注解内容

JSX 的判断语句

• 使用三元运算符→ condition ? trueResult : falseResult
• && 逻辑运算符→ condition && trueResult（如条件成立，就显示）

Fragment

※ JS传递参数时只能传递一个元素，React v16.2.0以後可以使用<React.Fragment>标签包裹最外层，如此便不会多一个 <div> 标签

const testFunction =()=> {
    return( 
        <React.Fragment>
            <button> 大家好 </button>
            <h1> 我不好 </h1>
        </React.Fragment>
    );
}

使用方式

• 最外层只能有一个标签，让整个元件可被视为一个 HTML 元素
  • React 16 起新增了 Fragment <></>，是 <Fragment></Fragment> 的省略写法
• 原生 HTML 标签使用小写，自订的 React Component 则首字大写
• JSX 是 JS 表达式，可使用条件（三元运算子）、回圈、变数等 JS 语法
• JSX 内的 HTML 标签可使用 HTML 属性
  • 可使用所有 HTML 原生属性
  • React 16 以後使用自订属性不须要加上 data-*
  • 属性值以 "" 包围，预设型别为 string
  • 可使用 { } 加入不同型别的参数，或者使用 JS 的变数
  • 加入属性若无设定值，预设为 true；未加入的属性预设值则为 false
  • JSX 的底层是 JS，故属性class需要使用className，而for需要使用htmlFor
  • 可以用 ES6 的 Spread Operator 来一次设定多个属性

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

• Inline Styles (CSS 样式)
  • 跟 JavaScript DOM API 一样使用 camelCased properties
  • style 属性传入的值为物件
  • 如果样式的值为数字，预设单位为px

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

• 关於 InnerHTML
  • 由於安全上的考量，React 会自动将 InnerHTML 转为跳脱字元（Escape character）以避免 XSS(cross-site-scripting) 攻击
  • 如果想使用类似原生 InnerHTML 的效果，JSX 提供 dangerouslySetInnerHTML 这个属性