学习React中的JSX基本语法

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 进行传递

素燃

发布了63 篇原创文章 · 获赞 100 · 访问量 31万+

私信关注