React JSX
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX,但它有以下优点:
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的,在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
在 JSX 中使用表达式
你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。
例如 1 + 1, user.firstName, 以及 formatName(user) 都是可以使用的。
class App extends Component {
render() {
return (
<h1>{1+1}</h1>
);
}
}
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值,则会输出 false.
class App extends Component {
render() {
return (
<div>
<h1>{i === 1 ? 'True!' : 'False'}</h1>
</div>
);
}
}
样式
React 推荐使用内联样式,可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
class App extends Component {
render() {
return (
<h1 style = {myStyle}>Hello World!!!</h1>
);
}
}
注释
注释需要写在花括号中,实例如下:
class App extends Component {
render() {
return (
//element
<div>
<h1>Hello world</h1>
{/*注释...*/}
</div>
);
}
}
数组
JSX 允许在模板中插入数组,数组会自动展开所有成员:
var arr = [
<h1>apple</h1>,
<h2>huawei</h2>,
];
class App extends Component {
render() {
return (
//element
<h1>{arr}</h1>
);
}
}