JSX基础语法注解没什么好说的

lxf2023-05-15 00:46:37

首页 > JavaScript
> 正文

JSX

了解JSX

以下是一个简单的JSX编码：

// 1.界定根部件
const element = <div>He1lo World</div>;
// 2.3D渲染根部件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(element);

什么叫JSX

JSX是一种JavaScript词法拓展(extension)，也很多地方称作JavaScript XML，由于看上去便是一段XML词法，它用以叙述我们自己的UI页面，而且其进行可以跟JavaScript融合在一起应用，它有别于Vue里的控制模块词法，我们不需要专业学习模块词法中的一些命令(例如v-for、v-if、v-else、v-bind)

为何React选了JSX

React觉得3D渲染逻辑性实质上与其它UI逻辑性存有本质藕合:

例如UI必须绑定事件(button、a原生态等)
例如UI过程中需要展现数据信息情况
例如在一些情况发生变化时，又需要调整UI

HTML和JS之间有紧密联系，因此React没有把标识分离出来到不同类型的文档中，反而是把它们组成到了一起，这地方便是部件(Component)

JSX的书写规范

JSX的高层只有有一个根元素，因此我们有些时候会到表层包囊一个div原素(或使用后边学习的Fragment）
为了能方便阅读，我们一般在jsx的表层包囊一个小括号()，这可以方便阅读，而且jsx能够自动换行撰写
JSX里的标识能是单标识，还可以是双标识，假如是单标识，需要以/>末尾

JSX基础语法

JSX注解

没什么好说的，直接用编码：

<div>
    {/* 这是JSX的注解 */}
    <h2>{message}</h2>
</div>

JSX插进具体内容

JSX置入自变量做为子元素

当变量是Number、String、Array种类时，能直接表明
当变量是null、undefined、Boolean种类时，具体内容为空
- 若想要可显示null、undefined、Boolean，那就需要转为字符串数组
- 变换的方式有很多种，例如toString方式、和空字符串拼接，String(自变量)等形式
Object对象类型不能成为子元素(not valid as a React child)

这儿的子元素，就等于是标签的具体内容，假如是做为标签属性数值这又会有所不同

下边是一个测试用例：

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      message: 'Hello World',
      num: 1,
      list: ['a', 'b', 'c'],
      a: undefined,
      b: null,
      c: true,
      d: {}
    }
  }

  render() {
    const { message, num, list, a, b, c }=this.state;
    return (
      <div>
        <h2>{message}</h2>
        <h2>{num}</h2>
        <h2>{list}</h2>
        <h2>{a}</h2>
        <h2>{b}</h2>
        <h2>{c}</h2>
      </div>
    )
  }
}