JSX简介
JSX 是一种用于描述UI的JavaScript扩展语法,本质上仍然是JavaScript
React 认为,一个组件应该是具备UI描述和UI数据的完整体,不应该将它们分开处理,于是发明了JSX,作为UI描述和UI数据之间的桥梁。这样,在组件内部可以使用类似HTML的标签描述组件的UI,让UI结构直观清晰。
Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用,在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象
React中 JSX 常用 语法
1.基本语法
JSX的基本语法和XML语法相同,都是使用成对的标签构成一个树状结构的数据
const myElement = (
<div>
<h1>Hello JSX</h1>
</div>
);
2. 标签类型
标签语法两种,一种是DOM标签(div, p, h1),另一种是React组件类型的标签, 当使用DOM类型的标签时,标签的首字母必须小写;当使用React组件类型的标签时,组件名称的首字母必须大写。React 也正是通过首字母的大小写判断渲染的是一个DOM类型的标签还是一个React组件类型的标签 。
// DOM类型标签
const dom_element = <h1>Hello, JSX</h1>;
// React组件类型标签
const react_element = <HelloWorld />;
// 二者可以互相嵌套使用
const my_element = (
<div>
<HelloWorld />
</div>
);
3.JavaScript表达式
JSX可以使用JavaScript表达式,因为JSX本质上仍然是JavaScript。
在JSX中使用JavaScript表达式需要将表达式用大括号“ { } ”包起来。
表达式在JSX中的使用场景主要有两个:通过表达式给标签属性赋值 和 通过表达式定义子组件
// 通过表达式给标签属性赋值
const element = <MyComponent foo={1 + "Hi"} />;
// 通过表达式定义子组件(map虽然是函数,但它的返回值是JavaScript表达式)
const todos = [10, "hello", 50];
const element = (
<ul>
{
todos.map(message => (
<Item key={message} message={message} />
))
}
</ul>
);
注意,JSX中只能使用JavaScript表达式,而不能使用多行JavaScript语句
// 错误
const element = <MyComponent foo={const val= 1 + 2; returnval; } />;
let complete;
const element = (
<div>
{
if(complete){
return < CompletedList />;
}else {
return null;
}
}
</div >
)
JSX中可以使用三目运算符或逻辑与(&&)运算符代替 if 语句的作用
// 正确
let complete;
const element = <div>{complete ? <CompletedList /> : null} </div>;
//正确
let complete;
const element = <div> {complete && <CompletedList />} </div>;
4.标签属性
当JSX 标签是DOM类型的标签时,对应DOM标签支持的属性JSX也支持,例如 id、class、style、onclick等。但是,部分属性的名称会有所改变,主要的变化有:class 要写成className,事件属性名采用驼峰格式,例如 onclick 要写成 onClick。原因是,class是JavaScript的关键字,所以改成className;React对DOM标签支持的事件重新做了封装,封装时采用了更常用的驼峰命名法命名事件
<div id='content' className='foo' onClick={() =>{console.log('Hello, React')}} />
当JSX标签是React组件类型时,可以任意自定义标签的属性名。
<User name='React' age='4' address='America' >
5.注释
JSX中的注释需要用大括号“{}”将/**/包裹起来。
const element = (
<div>
{/* 这里是一个注释 */}
<span>React</span>
</div>
)
6. 深入JSX
使用 JSX 中的点表示法来引用 React 组件。你可以方便地从一个模块中导出许多 React 组件
import React from 'react';
const Compments= {
DatePke: function DatePke(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function Picker() {
return <Compments.DatePke color="blue" />;
}
属性默认为“True”,如果你没有给属性传值,它默认为 true, 下边俩组件等价
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
使用 ...
作为“展开(spread)”操作符来传递整个属性对象
function App1(props) {
return <div>{props.children}</div>
}
function App2() {
return (
<App1>
<div>hello world</div>
</App1>
)
}
jsx中的子代, 使用 props.children 进行传递