Hello World
// 2. 创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(element)
```
- 2. 这段`element`变量的声明右侧`div的标签语法`是？
- 它不是一段`字符串`(因为没有使用引号包裹)
- 它看起来是一段`HTML元素`，但是我们能在`js`中直接给一个`变量赋值html元素`
- 其实是不可以的，如果我们将`type = "text/babel"`去除掉，那么就会出现语法错误；
- 其实她是一段`JSX的语法`；
- 3. `JSX`是？
- `JSX是一种Javascript的语法扩展`，也在很多地方称之为`Javascript XML`，因为看起来就是一段`XML语法`；
- 它用于描述我们的`UI界面`，并且完全可以和`Javascript`融合在一起使用；
- 不同于`Vue中的模板语法`，不需要专门血虚模板语法中的指令(例如：`v-for、v-if、v-else、v-bind`)
- 4. 为什么`React选择JSX`？
- 1. `React认为渲染逻辑本质上与其他UI逻辑存在内在耦合(html->js->state->html ) `
- 比如`UI`需要绑定事件(`button、a原生`等等)
- 比如UI中需要`展示数据状态`
- 比如某些`状态发生改变时`，又需要`改变UI`;
- 2. 它们之间是`密不可分`，所以`React没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件`；
- 3. 总结：`JSX其实是嵌入到Javascript中的一种结构语法`
### 2. JSX的基本使用
- 1. JSX的书写规范
- 1.1. `jsx结构中只能有一个根元素`
- 1.2. `jsx`结构通常会包裹一个`()`， `将整个jsx当做一个整体，实现换行`
- 1.3. `jsx`可以是`单标签`，也可以`双标签`，但是`单标签必须以/>结尾 `
- 2. JSX的注释编写
- ` {/* JSX的注释写法 */} `
- 3. JSX嵌入变量作为子元素
- 情况一： `当变量是Number、String、Array类型时，可以直接显示`
- 情况二：` null、undefined、Boolean类型时，内容为空`
- 如果希望可以`显示null、undefined、Boolean类型，需要转成字符串`；
- 转换的方式有很多，例如：`toString方法、和空字符串拼接，String(变量)等方式`
- 情况三： `Object对象类型不能作为子元素(not vaild as a React child)`
- 4. JSX嵌入表达式
- 运算表达式
- 三元运算符
- 执行一个函数
- 示例代码如下：
```javascript
Document
// 1.定义App根组件
class App extends React.Component {
constructor () {
super()
this.state = {
counter: 100,
message: 'hello world',
names: ['张三', '李四', '王五'],
aaa: null,
bbb: undefined,
ccc: true,
friend: {
name: 'kobe'
},
firstName: 'kobe',
lasterName: 'bryant',
age : 18,
movies: ['流浪地球','星际穿越','独行月球']
}
}
render () {
// 1. 插入标识符
const { counter, message, names } = this.state
const { aaa, bbb, ccc} = this.state
const { friend } = this.state
// 2. 对内容进行呢运算后显示(插入表达式)
const { firstName, lasterName } = this.state
const fullName = firstName + ' ' + lasterName
const { age } = this.state
const ageText = age >= 18 ? '成年人' : '未成年'
const liEls = this.state.movies.map(movie => <li key={movie}> { movie }</li>)
// 3. 返回jsx的内容
return (
<div>
{/*1. Number/String/Array直接显示出来 */}
<h2>{counter}</h2>
<h2>{ message }</h2>
<h2>{names.join('、')}</h2>
{/* 2. undefined/null/Boolean在页面中不显示，转成字符串可以在页面中*/}
<h2>{String(aaa)}</h2>
<h2>{bbb + ''}</h2>
<h2>{ccc.toString()}</h2>
{/* 3. Object类型不能作为子元素进行显示 */}
{/* <h2>{friend}</h2> */}
{friend.name}
{Object.keys(friend)[0]}
{/* 4. 可以插入对应的表达式 */}
<h2>{ 10 + 20 }</h2>
<h2>{ firstName+ ' ' + lasterName }</h2>
<h2>{ fullName }</h2>
{/* 5. 可以插入三元运算符 */}
<h2>{ age >= 18 ? '成年人' : '未成年' }</h2>
<h2>{ ageText }</h2>
{/* 6. 可以调用方法获取结果 */}
<ul>{liEls}</ul>
<ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
<ul>{this.getMoviesEls()}</ul>
</div>
)
}
getMoviesEls () {
const liEls = this.state.movies.map(movie => <li>{movie}</li>)
return liEls
}
}
// 2. 创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<App/>)
```
- 5. jsx绑定属性
- 比如元素都会有`title属性`
- 比如img元素会有`src属性`
- 比如a元素会有`href属性`
- 比如元素可能需要`绑定class`
- 比如原生使用内联样式`style`
- 示例代码如下：
```javascript
Document
// 1.定义App根组件
class App extends React.Component {
constructor () {
super()
this.state = {
message: 'hello world',
title: '哈哈哈',
imgUrl: 'https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMyNzc2NTgzLjA0NTAxODI%3D%27/0.png',
href: 'http://www.baidu.com',
isActive: true,
objStyle: { color: 'red', fontSize: '30px' }
}
}
render () {
const { message, title, imgUrl, href, isActive, objStyle } = this.state
// 需求： isActive: true -> active
// 1. class绑定的写法一：
const className = `aaa bbb ${isActive ? 'active' : ''}`
// 2. class绑定的写法二： 将所有的class放到数组中
const classList = ['aaa', 'bbb']
if(isActive) classList.push('active')
// 3. class绑定的写法三： 第三方库classnames -> npm install classnames
return (
<div>
{/* 1. 基本绑定 */}
<h2 title={ title }>{ message }</h2>
{/* <img src={ imgUrl } alt=''/> */}
<a href={href}>百度一下</a>
{ /* 2. 绑定class属性： 做好使用className */}
{/* js代码 -> class关键字 -> 用class做为属性名会被浏览器误解*/}
<h2 className={className}>哈哈哈哈</h2>
<h2 className={classList.join(' ')}>哈哈哈哈</h2>
{ /* 3. 绑定style属性: 绑定对象类型 */ }
<h2 style={{color: 'red', fontSize: '30px'}}>哈哈哈哈哈</h2>
<h2 style={objStyle}>哈哈哈哈哈</h2>
</div>
)
}
}
// 2. 创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<App/>)
```
本文由[mdnice](https://mdnice.com/?platform=6)多平台发布4.JSX语法
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 既然JSX是JavaScript 的语法扩展，与JavaScript之间等价转换，那自然而然，我们可以在jsx中使...
- jsx语法 一、jsx语法中有两种标签：1、普通的html标签：在组件中返回出去渲染的标签内容不需要像原生js那样...
- 一. Javascript类的定义 JS语法补充 ES5中定义类 class ES6开始才有的关键字 ES6中通过...
