ReactJS3 - JSX

来自React官方文档:

React 不强制要求使用 JSX,但是大多数人发现,在 JavaScript 代码中将 JSX 和 UI 放在一起时,会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

感觉有点儿像是机翻

JS与JSX的对比

个人体感就是,使用JSX去写React的话,更像是在写html,主要原因还是因为我菜……但是用普通的js文件去写的话,就会存在很多没必要的重复代码。

例如说创建一个登录页面,以下是纯javascript语言:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';

class LoginForm extends React.Component{
render(){
return (
React.createElement('form', {},
React.createElement("h1", {}, "登录"),
React.createElement('input', {type: 'text',placeholder:'姓名', value: '',}),
React.createElement('br', {}),React.createElement('br', {}),
React.createElement('input', {type: 'password', placeholder: '密码',value: '',}),
React.createElement('br', {}), React.createElement('br', {}),
React.createElement('button', {type: 'submit'}, "登录"))
)
}
};

export default LoginForm;

之前提过,React.createElement用JavaScript的语法去创建一个新的元素,这里React.createElement(arg1,arg2,arg3);的语法如下:

  • arg1 - 需要渲染的HTML元素
  • arg2 - 元素的特性,例如说id, class
  • arg3 - 元素的具体内容

以上的代码之中可以看到,重复代码真的很多。几乎是创建了多少个元素,就写了几遍React.createElement(),但是在jsx之中,就能够省略不少js代码。

如下为同样的登陆页面在jsx文件中实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';

class LoginForm extends React.Component{
render(){
return (<form><h2>登录</h2>
<input type="text" placeholder="姓名" /><br/><br/>
<input type="password" placeholder="密码" /> <br/><br/>
<input type="submit" nvalue="log" value="登录"/>
</form>);
}
};

export default LoginForm;

可以看出,这样的写法更加偏向于写html,也比使用纯js的写法更加便于理解。

如何创建JSX文件

将后缀名从js更改成jsx,随后的语法就如上面的demo一样:

1
2
3
4
5
render(){
return(
其中可以直接使用html语法
)
}

注意点1:浏览器是没有办法直接解析jsx代码的,jsx代码通过babel插件转译成js所以一定要记住看看插件中有没有babel

注意点2:

1
2
3
4
5
6
7
8
class Demo extends React.Component{
render(){
return (
<h3>ReactJS:</h3>
<p>ReactJS是由facebook开发的一个js框架</p>
)
}
}

以上代码是会在编译的时候报错的,报错信息如下:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?

在React中的语法,相邻元素的话必须要被一个更大的标签所包住,也就是说,一个return()之中,只能返回一个最大元素,不能返回数个同级元素。

根据报错信息,上面的代码可以修改成:

1
2
3
4
5
6
7
8
9
10
class Demo extends React.Component{
render(){
return (
<React.Fragment>
<h3>ReactJS:</h3>
<p>ReactJS是由facebook开发的一个js框架</p>
</React.Fragment>
)
}
}

这里<React.Fragment></React.Fragment>可以用<div></div>,也可以用<p></p>等其他标签来代替,只要所用的标签能够包住同级代码即可。

使用<React.Fragment></React.Fragment>好处就在于,不会在html之中生成额外的节点。如果返回的元素之中需要生成节点,例如说返还的元素是一个列表<table></table><td></td>,那么直接使用必须的相应标签。若是不想在DOM树之中生成额外的节点,就可以直接使用<React.Fragment></React.Fragment>

JS表达式

在之前的例子之中都是直接输出文字,但是如果需要调用变量,或是使用Javascript表达式的话,就无法达成想要的效果。

在react之中,如果想要使用js表达式的话,需要用{}将其包住,如:{x}

Demo1-调取变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';

class Demo extends React.Component{
render(){
let x = 5
return (
<React.Fragment>
<h1>{x}</h1>
<h2>{x*x}</h2>
</React.Fragment>
)
}
}

export default Demo;

输出结果为:

5

25

Demo2-调用对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';

class Demo extends React.Component{
render(){
let name={
firstName:'Adam',
lastName:'Smith'
}
return (
<React.Fragment>
{name.firstName} {name.lastName}
</React.Fragment>
)
}
}

export default Demo;

输出结果为:

Adam Smith

Demo3-特性装饰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';

class Demo extends React.Component{
render(){
let highlight = {
color: 'green',backgroundColor:'grey'
}
return (
<React.Fragment>
<h1 style={highlight}>React</h1>
</React.Fragment>
)
}
}

export default Demo;

输出结果为:

React

当然,字体颜色是绿色,背景色是灰色。

Demo4-调用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';

function test() {
let course = 'React'
return <h1>欢迎来到{course}</h1>
}

class Demo extends React.Component{
render(){
return (
<React.Fragment>
<p>{test()}</p>
</React.Fragment>
)
}
}

export default Demo;

输出结果为:

欢迎来到React

当然,上面那行字是以<h1>元素来显示的,而非<p>

-------The end of this article  Thank you for your reading-------
0%